捕獲階段與氣泡階段 - 爲什麼下面的代碼不會產生相同的結果？

Question

我想在純Javascript中實現我自己的DnD - 首先用於學習目的 - 然後也許我會使用它 - 並且我偶然發現了這個泡沫/捕獲概念。我以爲我明白了，通過閱讀這個問題上接受的答案：What is event bubbling and capturing?，以及其他文章。

但我沒有 - 因爲我無法解釋爲什麼這2段代碼不會產生相同的結果。

爲什麼我註冊這個事件的順序 - 很重要？ 我認爲他們應該按照相同的順序被解僱 - 不管他們如何被註冊 - 按照捕獲/冒泡的規則。情況並非如此。

既然你點擊DIV3 - 出現這種情況：

案例1：jsBin

案例2：also jsBin

案例3 - 這是first answer of the above mentioned question

的Html它是相同的：

<div id="div1"> 
    div 1 
    <div id="div2"> 
    div 2 
    <div id="div3"> 
     div3 
    </div> 
    </div> 
</div> 

個

與外殼1 JS：

var div1 = document.querySelector("#div1"); 
var div2 = document.querySelector("#div2"); 
var div2 = document.querySelector("#div3"); 

/* div1 */ 
div1.addEventListener("click", function (event) { 
    log("capture phase: you clicked on div 1"); 
}, true); 

div1.addEventListener("click", function (event) { 
    log("bubble phase: you clicked on div 1"); 
}, false); 


/* div2 */ 
div2.addEventListener("click", function (event) { 
    log("capture phase: you clicked on div 2"); 
}, true); 

div2.addEventListener("click", function (event) { 
    log("bubble phase: you clicked on div 2"); 
}, false); 


/* div3 */ 
div3.addEventListener("click", function (event) { 
    log("capture phase: you clicked on div 3"); 
}, true); 

div3.addEventListener("click", function (event) { 
    log("bubble phase: you clicked on div 3"); 
}, false); 


var $log = $("#log"); 
function log(msg) { 
    $log.append('<p>' + msg + '</p>'); 
} 

案例2 - 的javascript：

var div1 = document.querySelector("#div1"); 
var div2 = document.querySelector("#div2"); 
var div2 = document.querySelector("#div3"); 

/* capture events */ 
div1.addEventListener("click", function (event) { 
    log("capture phase: you clicked on div 1"); 

}, true); 

div2.addEventListener("click", function (event) { 
    log("capture phase: you clicked on div 2"); 
}, true); 

div3.addEventListener("click", function (event) { 
    log("capture phase: you clicked on div 3"); 
}, true); 

/* bubbling events */ 
div1.addEventListener("click", function (event) { 
    log("bubble phase: you clicked on div 1"); 

}, false); 

div2.addEventListener("click", function (event) { 
    log("bubble phase: you clicked on div 2"); 
}, false); 

div3.addEventListener("click", function (event) { 
    log("bubble phase: you clicked on div 3"); 
}, false); 

哪裏是在我的思想的謬論？我錯過了什麼？謝謝:)

Answer 1

的問題是在你的變量的聲明。

var div1 = document.querySelector("#div1"); 
var div2 = document.querySelector("#div2"); 
var div2 = document.querySelector("#div3"); // <---- 

您沒有收到任何錯誤，因爲僅使用id的名稱通過id選擇元素是完全合法的。你不應該這樣做。它可以很快成爲一場噩夢。

test.addEventListener('click', function() { 
 
    console.log(this); 
 
})

<div id="test">Click Me</div>

Answer 2

的問題是在這裏

var div2 = document.querySelector("#div2"); 
var div2 = document.querySelector("#div3"); 

它必須是

var div2 = document.querySelector("#div2"); 
var div3 = document.querySelector("#div3");