关于DOM2级事件的事件捕获和事件冒泡
花一天时间研究完了DOM2级事件中addEventListener的执行机制,作为开山第一帖,和大家讲讲多个addEventListener同时添加时的执行先后规律:
如图,大家都知道,W3c的DOM事件触发分为三个阶段:
①、事件捕获阶段,即由最顶层元素(一般是从window元素开始,有的浏览器是从document开始,至于其中的差别我稍后会更新)开始,逐次进入dom内部,最后到达目标元素,依次执行绑定在其上的事件
②、处于目标阶段,检测机制到达目标元素,按事件注册顺序执行绑定在目标元素上的事件。
③、事件冒泡阶段,从目标元素出发,向外层元素冒泡,最后到达顶层(window或document),依次执行绑定再其上的事件。
在addEventListener中,利用第三个参数控制其是从哪个阶段开始,“true”是从捕获阶段开始,而“false”则是跳过捕获阶段,从冒泡阶段开始。
看一个简单的例子:
window.onload=function(){ var outer = document.getElementById("outer"); var inner = document.getElementById('inner');outer.addEventListener("click", function(){ alert("1"); }, true); inner.addEventListener("click", function(){ alert("2"); }, true); outer.addEventListener("click", function(){ alert("3"); },false) }
在这个例子里,如果我们点击内层元素inner,那么处于捕获阶段的1最先弹出,接下来是目标元素2弹出,最后是处于冒泡阶段的3弹出,即:1,2,3.
即使在代码里变换三个绑定事件的顺序,只要点击的是inner,这个执行顺序就不会变。
那么问题来了,如果点击的是外层outer的话呢?
要明白这个问题,我们必须明确一点:目标事件在哪一层,事件流就在哪一层回流,即使在outer事件下还有许多子孙节点,事件流都不会在outer之后往内流,此时,inner上的事件不会被触发,因此在这段代码中,只会弹出1和3。
那么这两个数字哪个先弹呢?由于此时事件处于第二阶段,即“处于目标阶段”,弹出顺序取决的也不再是捕获或冒泡,而是谁在代码中先注册,因此,在这段代码中,弹出的是:1→3.
综上所述,事件在DOM中的执行顺序为:外层捕获事件→内层捕获事件→先注册的目标事件→后注册的目标事件→内层冒泡事件→外层冒泡事件
让我们再看个例子来加深这个概念:
window.onload=function(){ var outer = document.getElementById("outer"); var inner = document.getElementById('inner'); var oBox=document.getElementById('box'); oBox.addEventListener("click",function(){ alert('1'); },true) oBox.addEventListener("click",function(){ alert('4'); },false) outer.addEventListener("click", function(){ alert("2"); }, true); inner.addEventListener("click",function(){ alert('3.2') },false) inner.addEventListener("click", function(){ alert("3.1"); }, true);}
在这段代码里,box上的捕获事件最先执行,然后是outer上的捕获事件,然后是inner上先注册的事件,然后是inner上后注册的事件,最后是box上的冒泡事件
弹出顺序为:1→2→3.2→3.1→4
补充一点,在ie8-中,由于addEventLister不起作用,我们使用attachEvent方法来绑定事件,此时在第二阶段,也就是处于目标阶段,如果目标元素上绑定了两个事件,那么其执行顺序和addEventLister相反:谁后注册谁先执行。
关键字:JavaScript, 事件, 冒泡, 捕获
版权声明
本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!