addEventListener()方法

★JS事件的捕获阶段和冒泡阶段：

　　讨论的主要是两个事件模型：IE事件模型与DOM事件模型

　　　　IE内核浏览器的事件模型是冒泡型事件（没有捕获事件过程），事件句柄的触发顺序是从ChildNode到ParentNode。

　　　　　　<div id="ancestor">

　　　　　　　　<button id="child"></button>

　　　　　　</div> 

　　　　　　以上的HTML代码在IE内核下，事件是这样传播的：{

 

　　　　　　　　1、Button#child; 
　　　　　　　　2、div#ancestor; 
　　　　　　　　3、Body; 
　　　　　　　　4、Document 

 

　　　　　　} 

　　　　DOM标准的浏览器事件是：捕获事件和冒泡事件。

　　　　捕获事件过程：{

　　　　　　1、Window 
　　　　　　2、Document 
　　　　　　3、Body 
　　　　　　4、Div#ancestor 
　　　　　　5、Button#child 

　　　　}

　　　　冒泡事件过程：{

　　　　　　6、Div#ancestor 
　　　　　　7、Body 
　　　　　　8、Document 
　　　　　　9、Window 

　　　　}　

　　　　当开发者在一个元素上注册了事件后，这个事件的响应顺序是从window(最顶层)开始一级一级的向下传播，然后到了该元素后事件捕获过程结束，事件开如冒泡，一级一级向父层元素冒泡（请注意第6              步）。当然，开发者可以很轻松的决定DOM标准的浏览器中的事件需要在哪个传播过程触发。

　　　　

　　　　DOM标准的浏览器事件注册方法是通过addEventListener方法注册，而IE内核的浏览器则是通过attachEvent方法注册。

　　　　addEventListener方法带有三个参数，分别是：eventType、handler、useCapture。 eventType不带有on字符串； 
　　　　　　handler参数是一个事件句柄，这个函数或方法带有一个事件对象参数； 
　　　　　　useCapture参数决定了事件句柄触发在哪种事件传播阶段，如果useCapture为true则为捕获阶段，反之则为冒泡阶段。

　　　　DOM事件对象提供了stopPropagation方法用于阻止事件流。事件流包括捕获阶段及冒泡阶段的事件流。

 

　　　　IE内核提供了attachEvent方法为元素注册事件，

　　　　　　该方法带有两个参数：

 

　　　　　　{

 

　　　　　　　　eventType 事件类型，请注意这个参数与addEventListener的eventType的区别，它必须带有on； 

 

　　　　　　　　handler 事件句柄 ，请注意attachEvent没有提供事件捕获阶段的参数，IE内核的事件都是发生在冒泡阶段！ 

 

　　　　　　}

　　　　另外还有一些注意事项：

　　　　　　1、DOM标准的addEventListener方法执行事件的顺序是按照事件注册的顺序执行的。而attachEvent方法则相反–后注册的事件先觖发，先注册的事件后触发。 

　　　　　　2、DOM标准的浏览器文本节点也会冒泡，而IE内核的浏览器文本节点不会冒泡。

　　　　　　3、DOM标准的浏览器事件对象与IE内核的浏览器事件不同(具体请参阅http://www.quirksmode.org/js/introevents.html)。

　　　　　　4、DOM标准的浏览器事件卸载方式与IE内核的事件卸载方式不同。

　　　　　　　　object.removeEventListener(eventType,handler,useCapture);//DOM标准的事件卸载方式 
　　　　　　　　object.detachEvent(eventType,handler);//IE内核的事件卸载方式 

　　　　　　　　在DOM标准的事件卸载方式中需要注意的是：事件捕获的参数。如果你的事件是注册在捕获阶段，则卸载事件时，必须将其指定为捕获阶段(true)，否则无法卸载；如果你的事件注册在注册在冒泡阶                          段，则必须将其指定为冒泡阶段(false)，否则同样无法卸载！