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

最新推荐文章于 2024-05-30 13:59:14 发布

迎风海盗旗

最新推荐文章于 2024-05-30 13:59:14 发布

阅读量654

点赞数 21

分类专栏：前端 JavaScript 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/cccloveforever/article/details/138172256

版权

前言

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文档中显示一个小于号,必须写为“<”或者“<”要显示一个大于号，必须写为“>”或“&#62:”。
在HTML中，最常见的字符实体就是不可拆分空格。通常，HTML会合并文档中的空格。假如连续写了10个空格，其中9个会被去掉。要在HTML中插入空格，可以使用“ ”。

 <!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&

最低0.47元/天解锁文章

迎风海盗旗

关注

21
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 动态网页实例 —— DOM 中的事件处理

DOM2事件模型规则描述了创建、捕获、控制与取消事件的标准方法，还描述了事件传播行为，也就是说，一个事件如何到达其目标，以及达到后将要发生的动作。在6中，由于没有提供对 DOM2事件模型的支持,因此,本章中涉及DOM2的代码只能在Netscape和Mozilla浏览器中正常运行。DOM是 Document Object Model的缩写，由W3C进行标准化。目前标准化尚未完全完成，因此，还不能为所有浏览器兼容。DOM第0层(简称DOM0):大致相当于Netscape3和IE3支持的层次。
复制链接

扫一扫