起泡和捕获阶段的行为

Behaviour of Bubbling and Capturing Phase

本文关键字:      更新时间:2024-01-17

有人能根据代码中4个案例的输出,点击div2和div1 ,解释一下这个代码的冒泡和捕获阶段吗

http://jsfiddle.net/JuKmM/9/

代码:

function doSomething2(){
 console.log("div 1 clicked");
}
var element1=document.getElementById('div_1');
var element2=document.getElementById('div_2');
element1.addEventListener('click',doSomething2,false);
element2.addEventListener('click',doSomething,true);
//element1.addEventListener('click',doSomething2,false);
//element2.addEventListener('click',doSomething,false);
//element1.addEventListener('click',doSomething2,true);
//element2.addEventListener('click',doSomething,true);
//element1.addEventListener('click',doSomething2,true);
//element2.addEventListener('click',doSomething,false);
function doSomething(){
console.log("div2 clicked");
}

来自MDN文档:

使用捕获 可选

如果为true,useCapture表示用户希望启动捕获。启动捕获后,指定类型的所有事件都将被调度到已注册的侦听器,然后再被调度到DOM树中其下的任何EventTarget。通过树向上冒泡的事件不会触发指定使用捕获的侦听器。有关详细解释,请参阅DOM级别3事件。如果未指定,useCapture默认为false。

您正在为"div_1"设置处理程序,使其不使用捕获,并为"div_2"设置处理器,使其使用捕获,尽管因为它没有子级,所以这无关紧要。因此:

  • 单击蓝色部分("div_1")只会触发该元素上的处理程序
  • 单击红色部分("div_2")会触发该元素的处理程序。然后,该事件将DOM弹出为"div_1",并触发该处理程序
相关文章:
  • 没有找到相关文章