冒泡和捕获阶段的行为答案

【问题标题】：Behaviour of Bubbling and Capturing Phase冒泡和捕获阶段的行为
【发布时间】：2013-12-01 15:07:22
【问题描述】：

有人可以根据代码中 4 个案例的输出，在单击 div2 和 div1 时用此代码解释冒泡和捕获阶段

代码：

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");
}

【问题讨论】：

如果您能解释一下您预期会发生什么，将会有所帮助。

标签： javascript event-bubbling event-capturing

【解决方案1】：

来自the MDN documentation：

useCapture 可选

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

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

单击蓝色部分（“div_1”）只会触发该元素上的处理程序。
单击红色部分（“div_2”）会触发该元素的处理程序。然后该事件将 DOM 冒泡到“div_1”，并触发该处理程序。

【讨论】：