您的位置：首页 > 其它

事件传播与addEventListener()方法的第三个参数

2013-10-29 19:11 253 查看

个人主页：http://laichuanfeng.com/

JavaScript部分

function ready() {
document.getElementsByTagName("button")[0].addEventListener("click", first, false);
document.getElementsByTagName("div")[0].addEventListener("click", second, true);
document.getElementsByTagName("div")[0].addEventListener("click", third, false);
};
function first() {
alert("first");
}
function second() {
alert("second");
}
function third() {
alert("third");
}

HTML部分

<body onload="ready()" >
<div style="width:200px;height:200px;background-color:silver;">
<button type="button">Test</button>
</div>

当点击Test按钮时，事件执行顺序：second,first,third，为什么会这样？

这和当年Netscape与IE的浏览器之争分不开，他们两个浏览器的事件顺序不一致。

Netscape 支持事件捕捉（capturing），从顶层的父节点开始触发事件，从外到内传播。

IE则支持事件冒泡(bubbling)，从最内层的节点开始触发事件，逐级冒泡直到顶层节点，从内向外传播。

然后我们来看看addEventListener()的第三个参数useCapture，这个参数决定要使用的事件处理程序的调用类型，

如果参数是true，事件处理程序以捕捉模式触发；

如果参数是false，事件处理程序以冒泡模式触发。

所以例子中函数调用的次序是：

捕获模式，second()，先于目标对象触发；

目标对象本身的事件处理程序，first()；

冒泡模式，third()，在目标对象之后触发。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： addEventListener 事件传播捕获事件处理程序

相关文章推荐

新的分享

章节导航