DOM事件

标签：

DOM事件流

DOM(文档对象模型)结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素结点与根节点之间按特定的顺序传播，路径所经过的节点都会收到该事件，这个传播过程可称为DOM事件流。
事件顺序有两种类型：事件捕捉和事件冒泡
DOM标准同时支持两种事件模型，即捕获型事件与冒泡型事件，但是，捕获型事件先发生。两种事件流都会触发DOM中的所有对象，从document对象开始，也在document对象结束（大部分兼容标准的浏览器会继续将事件是捕捉/冒泡延续到window对象）。

事件传送：

标准的事件转送模式

（1）.在事件捕捉（Capturing）阶段，事件将沿着DOM树向下转送，目标节点的每一个祖先节点，直至目标节点。例如，若用户单击了一个超链接，则该单击事件将从document节点转送到html元素，body元素以及包含该链接的p元素。

在此过程中，浏览器都会检测针对该事件的捕捉事件监听器，并且运行这件事件监听器。

(2). 在目标（target）阶段，浏览器在查找到已经指定给目标事件的事件监听器之后，就会运行 该事件监听器。目标节点就是触发事件的DOM节点。例如，如果用户单击一个超链接，那么该链接就是目标节点（此时的目标节点实际上是超链接内的文本节点）。

（3）.在冒泡（Bubbling）阶段，事件将沿着DOM树向上转送，再次逐个访问目标元素的祖先节点到document节点。该过程中的每一步。浏览器都将检测那些不是捕捉事件监听器的事件监听器，并执行它们。

事件句柄和事件接听器

事件句柄
事件句柄（又称事件处理函数，DOM称之为事件监听函数），用于响应某个事件而调用的函数称为事件处理函数。

每一个事件均对应一个事件句柄，在程序执行时，将相应的函数或语句指定给事件句柄，则在该事件发生时，浏览器便执行指定的函数或语句，从而实现网页内容与用户操作的交互。

当浏览器检测到某事件发生时，便查找该事件对应的事件句柄有没有被赋值，如果有，则执行该事件句柄。

我们认为响应点击事件的函数是onclick事件处理函数。以前，事件处理函数有两种分配方式：在JavaScript中或者在HTML中。

如果在JavaScript 中分配事件处理函数， 则需要首先获得要处理的对象的一引用，然后将函数赋值给对应的事件处理函数属性，请看一个简单的例子：

1. var link=document.getElementById("mylink");

2. link.onclick=function(){

3. alert("I was clicked !");

4. };

这种传统的事件绑定技术，优缺点是显然的：

*简单方便，在HTML中直接书写处理函数的代码块，在JS中给元素对应事件属性赋值即可。

*IE与DOM标准都支持的一种方法，它在IE与DOM标准中都是在事件冒泡过程中被调用的。

*可以在处理函数块内直接用this引用注册事件的元素，this引用的是当前元素。

*要给元素注册多个监听器，就不能用这方法了。

事件接听器
除了前面已经介绍的简单事件句柄之外，现在大多数浏览器都内置了一些更高级的事件处理方式，即，事件监听器，这种处理方式就不受一个元素只能绑定一个事件句柄的限制。

我们已经知道了事件句柄与事件监听器的最大不同之处是使用事件句柄时一次只能插接一个事件句柄，但对于事件监听器，一次可以插接多个。

IE下的事件监听器：
IE提供的却是一种自有的，完全不同的甚至存在BUG的事件监听器，因此如果要让脚本在本浏览器中正常运行的话，就必须使用IE所支持的事件监听器。另外，Safari 浏览器中的事件监听器有时也存在一点不同。

在IE中，每个元素和window对象都有两个方法：attachEvent方法和detachEvent方法。

element.attachEvent("onevent",eventListener);
此方法的意思是在IE中要想给一个元素的事件附加事件处理函数，必须调用attachEvent方法才能创建一个事件监听器。attachEvent方法允许外界注册该元素多个事件监听器。

attachEvent接受两个参数。第一个参数是事件类型名，第二个参数eventListener是回调处理函数。

这里得说明一下，有个经常会出错的地方，IE下利用attachEvent注册的处理函数调用时this指向不再是先前注册事件的元素，这时的this为window对象。还有一点是此方法的事件类型名称必须加上一个”on”的前缀（如onclick）。 1element.attachEvent("onevent",eventListener);
要想移除先前元素注册的事件监听器,可以使用detachEvent方法进行删除，参数相同。

DOM标准下的事件监听器：
在支持W3C标准事件监听器的浏览器中，对每个支持事件的对象都可以使用addEventListener方法。该方法既支持注册冒泡型事件处理，又支持捕获型事件处理。所以与IE浏览器中注册元素事件监听器方式有所不同的。Java

addEventListener方法接受三个参数。第一个参数是事件类型名，值得注意的是，这里事件类型名称与IE的不同，事件类型名是没’on’开头的;第二个参数eventListener是回调处理函数（即监听器函数）;（编程人员需注意:http://www.ytbdqn.com/show-4-76-1.html）第三个参数注明该处理回调函数是在事件传递过程中的捕获阶段被调用还是冒泡阶段被调用 ，通常此参数通常会设置为false（为false时是冒泡）,那么，如果将其值设置为true，那就创建一个捕捉事件监听器。

移除已注册的事件监听器调用element的removeEventListener方法即可，参数相同。

通过addEventListener方法添加的事件处理函数，必须使用removeEventListener方法才能删除，而且要求参数与添加事件处理函数时addEventListener方法的参数完全一致（包括useCapture参数），否则将不能成功删除事件处理函数。

跨浏览器的注册与移除元素事件监听器方案
我们现在已经知道，对于支持addEventListener方法的浏览器，只要需要事件监听器脚本就都需要调用addEventListener方法；而对于不支持该方法的IE浏览器，使用事件监听器时则需要调用attachEvent方法。要确保浏览器使用正确的方法其实并不困难，只需要通过一个if-else语句来检测当前浏览器中是否存在addEventListener方法或attachEvent方法即可。

DOM事件

标签：

原文地址：http://www.cnblogs.com/luanshijiaren1/p/4454023.html