Поведение барботажного и Capturing фазы

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

От the MDN documentation:

useCaptureДополнительный

Если это правда, useCapture указывает на то, что пользователь хочет начать захват. После начала захвата все события указанного типа будут отправлены зарегистрированному слушателю перед отправкой на любой EventTarget под ним в дереве DOM. События, которые пузырятся вверх через дерево, не будут вызывать слушателя, назначенного для использования захвата. Подробные объяснения см. В разделе DOM Level 3 Events. Если не указано, useCapture по умолчанию - false.

Вы настраиваете обработчик для «div_1» таким образом, что он делает не использовать захват и обработчик для «div_2» ​​таким образом, что она делает, хотя, так как это не имеет никаких детей, что не имеет большого значения. Таким образом:

• Щелчок по синей части («div_1») вызывает только обработчик этого элемента.
• Щелчок по красной части («div_2») запускает обработчик для этого элемента. Событие затем сбрасывает DOM до «div_1», и этот обработчик запускается.