JavaScript 动态网页实例 —— DOM 中的事件处理

前言

        DOM2事件模型规则描述了创建、捕获、控制与取消事件的标准方法,还描述了事件传播行为,也就是说,一个事件如何到达其目标,以及达到后将要发生的动作。在6中,由于没有提供对 DOM2事件模型的支持,因此,本章中涉及DOM2的代码只能在Netscape和Mozilla浏览器中正常运行。

        DOM是 Document Object Model的缩写,由W3C进行标准化。目前标准化尚未完全完成,因此,还不能为所有浏览器兼容。W3C对DOM定义了3个层次,如下:

  • DOM第0层(简称DOM0):大致相当于Netscape3和IE3支持的层次。习惯上称这个层次为经典(或标准)JavaScript对象模型。该层次支持公用的文档对象聚集:forms[]、images[l、anchors[]、links[]与 applets[]。
  • DOM第1层(简称DOM1):提供了通过公用函数集访问页面所有元素的功能。在该层次中,页面中的所有元素在任何时刻都可以读写。
  • DOM第2层(简称DOM2):可以访问包括XM和CSS等的页面元素。该层次提供了更高级的事件模型,但尚未完全被主流的浏览器所支持。

7.1 事件流

这个章节给出一段 DOM 事件流的示例代码,可以显示事件流的实现过程,同时,还显示完成该事件流所使用的JavaScript代码。

要点

        本节代码主要使用了innerHTML 属性、HTML的<pre>标签、HTML字符实体等内容,其主要功能和用法如下。

  • Netscape6+、Opera7+以及IE4+ 都支持非标准的 innerHTML属性,该属性允许。
  • 对 HTML 元素内容的简单读取和修改。
  • 使用 innerHTML属性,可以显示或修改 HTML,页面标签相应部分的 HTML 代码.
  • 也可以使用 innerHTML 属性设置 HTML 元素的内容。
  • 在E中,还支持innerText、outerText、outerHTML属性。innerText与innerHTMI类似,只是用 innerText 设置的内容都被作为纯文本处理,因此,不会生成相应的HTML 元素。outerText与outerHTML属性,分别和相对的 Inner 属性相似,只是这两个属性还对元素本身进行修改。
  • HTML 的<pre></pre>标签可以对其中的内容原样输出,但其中包含的部分 HTMI字符则不能原样输出,此时,必须使用HTML字符实体。
  • 在 HTML中,有些字符拥有特殊含义,例如,小于号“<”定义为一个 HTML 标签的开始。若要浏览器显示这些字符,必须在HTML代码中插入字符实体。一个字符实体拥有3个部分:一个and符号(&),一个实体名或者一个实体号,最后是一个分号(;)。因此,要在 HTML文档中显示一个小于号,必须写为“&lt;”或者“&#60;”要显示一个大于号,必须写为“&gt;”或“&#62:”。
  • 在HTML中,最常见的字符实体就是不可拆分空格。通常,HTML会合并文档中的空格。假如连续写了10个空格,其中9个会被去掉。要在HTML中插入空格,可以使用“&nbsp;”。
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>事件流</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<script type="text/javascript">
<!--
function gotClick(who) 
{document.all.results.innerHTML += who + " 标签被单击 <br>";
}
//-->
</script>
</head>
<body onclick="gotClick('body');">
<h1>事件流测试</h1><br>
<table onclick="gotClick('table');">
<tr onclick="gotClick('tr');">
<td onclick="gotClick('td');">
<p onclick="gotClick('p');">
单击 <b onclick="gotClick('b');">这里</b> 来观察事件流!
</p> 
</td> 
</tr> 
</table>
<hr> <br>
<p id&

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/9676.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

新版文件同步工具(Python编写,其中同时加入了多进程计算MD5、多线程复制大文件、多协程复制小文件、彩色输出消息、日志功能)

两个月前&#xff0c;接到一个粉丝的要求&#xff0c;说希望在我之前编写的一个python编写的文件同步脚本(Python编写的简易文件同步工具(已解决大文件同步时内存溢出问题)https://blog.csdn.net/donglxd/article/details/131225175)上加入多线程复制文件的功能&#xff0c;前段…

英语学习笔记8——What‘s your job?

What’s your job? 你是做什么工作的&#xff1f; 词汇 Vocabulary policeman 男警察 policewoman 女警察 police n. 警力 集合名词&#xff0c;永表复数 西方国家警察管的事很多。交警&#xff0c;刑警&#xff0c;武警一般不分开。 taxi driver 出租车司机 taxi / cab n.…

空间复杂度

前言 通过上一节的学习&#xff0c;我们知道了衡量一个算法是否高效的标准就是复杂度&#xff0c;我们已经学习了时间复杂度&#xff0c;那么本节我们就了解一下空间复杂度的相关知识&#xff0c;那么我们废话不多说&#xff0c;正式进入今天的学习 空间复杂度 空间复杂度也是…

python爬虫(三)之虎嗅网汽车文章爬虫

python爬虫&#xff08;三&#xff09;之虎嗅网汽车文章爬虫 闲来没事&#xff0c;闲鱼上有个好兄弟要我从虎嗅网上抓一些汽车文章的爬虫&#xff0c;于是大力出奇迹&#xff0c;我写了一个python程序&#xff0c;将这个网站上所有的汽车文章全部抓取下来了&#xff0c;存储到…

若依生成代码的步骤

1.创建表&#xff0c;要有注释 2.导入表 3.创建主菜单 4.修改表 5.生成代码 6.把代码复制到自己的程序中&#xff1a;复制表、后端、前端 7.重启后端&#xff0c;如果有问题则clean 8.回到浏览器可以看到正常显示了生成的页面

JAVA获取application.yml配置文件的属性值

application.yml配置参数 方式一&#xff1a;使用Value方式(常用) 语法 Value("${配置文件中的key:默认值}") Value("${配置文件中的key}")方法1&#xff1a;使用的类文件中定义变量&#xff0c;直接使用变量 import org.springframework.beans.factory.an…

【2024】Gradle安装配置以及基于Kotlin 进行详细使用

目录&#x1f4bb; 一、介绍二、安装Gradle1、下载安装2、配置环境变量2.1、mac2.2、windows 3、配置国内国内镜像源4、初始化Gradle项目4.1、项目结构4.2、Gradle常用命令 三、项目配置1、配置文件介绍1.1、设置文件settings.gradle1.1.1、单体项目1.1.2、父子项目 1.2、构建文…

5.2 Java全栈开发前端+后端(全栈工程师进阶之路)-服务端框架-Spring框架-相信我看这一篇足够

1.Spring框架 1.1.Spring框架简介 Spring是一个基于java的轻量级的、一站式框架。 虽然Spring是一个轻量级框架&#xff0c;但并不表示它的功能少。实际上&#xff0c;spring是一个庞然大物&#xff0c;包罗万象。 时至今日&#xff0c;Spring已经成为java世界中事实上的标准…

常用控件(一)

常用控件 一 按钮类控件QPushButtonQRadioButtonQCheckBox 按钮类控件 QPushButton 使用QPushButton表示一个按钮&#xff0c;这是我们当前最熟悉的一个控件了; QPushButton继承自QAbstractButton&#xff0c;这个类是个抽象类&#xff0c;是其他按钮类的父类; QAbstractButt…

Java毕业设计 基于SpringBoot vue新能源充电系统

Java毕业设计 基于SpringBoot vue新能源充电系统 SpringBoot 新能源充电系统 功能介绍 首页 图片轮播 充电桩 充电桩类型 充电桩详情 充电桩预约 新能源公告 公告详情 登录注册 个人中心 余额充值 修改密码 充电桩报修 充电桩预约订单 客服 后台管理 登录 个人中心 修改密码…

eclipse插件开发(一)

eclipse插件开发在java技能树中&#xff0c;是一个比较古老的分支。网上资料也少。最近开发中需要用到此技能&#xff0c;故记录下点亮过程。笔者水平有限&#xff0c;记录供通道者浅读。 学习eclipse插件开发&#xff0c;首先需明确几个高频的概念&#xff0c;先说说何为插件及…

网工交换基础——VLAN Maping

一、定义 VLAN Maping通过修改报文携带的VLAN Tag来实现不同VLAN的相互映射。 二、应用场景 1、场景一&#xff1a;两个VLAN相同的二层用户网络通过骨干网络互联&#xff0c;为了实现用户之间的二层互通&#xff0c;以及二层协议&#xff08;例如MSTP等&#xff09;的统一部署…

pandas--数据的添加和修改

pandas--数据的添加和修改 1、替换数据2、填充空值3、修改索引名4、增加列5、插入列df.insert()6、增加行7、追加合并8、删除空值9、删除 1、替换数据 使用replace方法可以实现数据的批量替换。 df.replace(1, 10) # 将数据中的所有1替换为10 df.replace([1, 2, 3, 4], 8)…

layui select 绑定onchange事件失效

layui select 绑定onchange事件失效 问题背景解决方案 问题背景 在日常工作中&#xff0c;可能会用到页面 freemaker 以及 layui 前端框架&#xff0c;这个时候直接在 select 上面绑定 onchange 事件往往是不生效的&#xff0c;错误的方式 这种方式给 select 绑定的 onchange…

智慧景区新篇章:山海鲸可视化管理解析

随着旅游业的蓬勃发展&#xff0c;景区管理面临着越来越多的挑战。如何提升游客体验、优化资源配置、确保游客安全&#xff0c;成为景区管理者亟需解决的问题。山海鲸智慧景区管理可视化系统&#xff0c;以其先进的技术和创新的理念&#xff0c;为景区管理带来了全新的解决方案…

图像ISP——AGC参数解析

前言 AWB和AGC是两种常见的自动调整功能。AWB用于自动调整图像的白平衡&#xff0c;以确保颜色在不同光照条件下仍然看起来自然。而AGC则用于自动调整图像的增益&#xff0c;以在不同的亮度条件下保持适当的曝光。 代码例程 static AWB_AGC_TABLE_S g_stAwbAgcTable {/* bvali…

鸿蒙应用开发者高级认证指南及参考资料整理(含详细参考答案)

如何报名鸿蒙应用开发者高级认证 报名链接:点击这里进行报名。报名步骤: 点击上述链接进入报名页面。选择“立即报名”。在课程内容中找到“HarmonyOS应用开发者高级认证”,点击进入。点击“参加考试”,随后即可开始考试。考试注意事项 实名认证:考试前,请务必完成实名认…

厉害了,OPCUA协议助力航天工业探索苍穹!

今年以来&#xff0c;航天科技真是捷报频频&#xff0c;神州十八号载人飞船和嫦娥六号均发射成功&#xff01;还让宇航员成功地进入了天宫空间站&#xff0c;可喜可贺。说到航天过程&#xff0c;其中有一个环节尤为重要&#xff0c;就是布置众多望远镜。有人可能会问&#xff0…

赣红孵联合卫东街道未保站开展未成年人保护法散落在每个角落活动

为进一步提高家长的法治意识&#xff0c;依法保障未成年人的合法权益&#xff0c;全力构建安全和谐文明家庭&#xff0c;5月8日&#xff0c;赣红孵社会组织培育中心联合卫东街道未成年人保护站在在南师附小红谷滩校区实验小学开展“未成年人保护法散落在每个角落”未成年人普法…

Liunx日志轮转

目录 一.日志的重要性 二、日志系统rsyslog 常见的日志文件(系统、进程、应用程序) 日志优先级 三、logrotate日志轮转 什么是日志轮转&#xff1f; logrotate 的工作方式 logrotate 配置文件 logrotate命令 一.日志的重要性 Linux日志文件对于理解和解决系统中出现的…