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");
}
<body οnlοad="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()，在目标对象之后触发。
扫一扫
4010
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
