jquery之浏览器的事件模型(DOM 2级事件模型)

来源：互联网发布：魔法王座弩炮进阶数据编辑：程序博客网时间：2024/05/16 19:00

----------

DOM 0级事件模型的一个严重缺点是，因为属性被用于存储作为事件处理程序的函数的引用，所以每个元素对于任何特定的事件类型，每次只能注册一个事件处理程序。当元素被点击时，假设有两件想做的事情，则如下语句无法达到目的：

someElement.onclick = doFirstThing;

someElement.onclick = doSecondThing;

因为第2个赋值语句替换onclick属性的原先值，所以当触发事件时只调用doSecondThing。当然，可以在第3个函数中包含这两个函数，也就是让第3个函数调用这两个函数。但是，随着页面变得更加复杂，越来越难以保持对这种事情的跟踪。

DOM 2级事件模型被设计来解决这些类型的问题。在DOM 2级事件模型下，让我们看如何在DOM元素上建立事件处理程序甚或多个事件处理程序。

===

1.建立事件

并非把函数引用指派到元素属性，DOM 2级事件处理程序(也称为监听器)是通过一个元素方法而建立的。每个DOM元素都定义名为addEventListener()的方法，用于把事件处理程序附加到元素上。这个方法的格式：

addEventListener(eventType,listener,useCapture)

参数eventType是一个字符串，用于标识将要处理的事件类型。一般说来，这个字符串和DOM 0级事件模型里使用的，不带on前缀的事件名称是一致的。例如click/mouseover/keydown等。

参数listener是函数的引用，用于在元素上建立指定事件类型的处理程序。就像在基本事件模型里那样，Event实例作为第一个参数传递到这个函数。

最后的参数useCapture是布尔类型的，稍后我们会讲到，目前把它设置为false。

如例：

<html> <head> <title>DOM Level 2 Events Example</title> <mce:script type="text/javascript" src="../scripts/jquery-1.2.1.js" mce_src="scripts/jquery-1.2.1.js"></mce:script> <mce:script type="text/javascript"></mce:script> </head> <body> <img id="vstar" src="vstar.jpg" mce_src="vstar.jpg"/> <div id="console"></div> </body></html>

这段代码简单明白地说明我们能在同一个元素上为同一个事件类型建立多个事件处理程序。这是用基本事件模型(也就是0级事件处理模型)无法轻松做到的事情。在页面的就绪处理程序中获取图像元素的引用，然后为click事件建立3个事件处理程序。

请注意，即使这3个处理程序按建立时的顺序触发，这种顺序也不为标准所保证，代码的测试者没有观察到不同于建立时的顺序，但编写依赖于这种顺序的代码将是愚蠢的。请始终保持清醒的认识：在元素上建立的多个处理程序可能以随机顺序触发。

===

2.事件传播

在DOM 2级事件模型上，一旦事件被触发，事件首先从DOM树的根向下传播到目标元素，然后再次从目标元素向上传播到DOM树的根。前者(根到目标)称为捕获阶段，而后者(目标到根)称为冒泡阶段。

当把函数建立为事件处理程序时，可以标志为捕获型处理程序，这种情况下事件在捕获阶段中触发，或者标志为冒泡型处理程序，事件在冒泡阶段中触发。正如此刻你所猜想的那样，函数addEventListener()的参数useCapture用来标识建立哪个类型的处理程序。参数值为false时，建立冒泡型处理程序，反之参数值为true时，建立捕获型处理程序。