起泡和捕获阶段的行为

Question

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

Answer 1

来自MDN文档：

使用捕获 可选

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

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

• 单击蓝色部分（"div_1"）只会触发该元素上的处理程序
• 单击红色部分（"div_2"）会触发该元素的处理程序。然后，该事件将DOM弹出为"div_1"，并触发该处理程序