★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),否则同样无法卸载!