Question

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

Answer 1

来自the MDN documentation：

useCapture 可选


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

您正在设置“div_1”的处理程序，以便它不使用捕获，而“div_2”的处理程序使，但是它没有任何重要的孩子。因此：

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

鼓泡和捕获阶段的行为

1 个答案: