0

有人可以根据代码中 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");
}
4

1 回答 1

0

从MDN 文档：

useCapture 可选

如果为真，useCapture 表示用户希望启动捕获。启动捕获后，指定类型的所有事件将被分派到注册的侦听器，然后再分派到 DOM 树中它下面的任何 EventTarget。通过树向上冒泡的事件不会触发指定使用捕获的侦听器。有关详细说明，请参阅 DOM 级别 3 事件。如果未指定，useCapture 默认为 false。

您正在为“div_1”设置处理程序，使其不使用捕获，并为“div_2”设置处理程序，使其使用，尽管因为它没有孩子，这并不重要。因此：

  • 单击蓝色部分（“div_1”）仅触发该元素上的处理程序。
  • 单击红色部分（“div_2”）会触发该元素的处理程序。然后该事件将 DOM 冒泡到“div_1”，并触发该处理程序。
于 2013-12-01T15:16:22.147 回答