捕获阶段与气泡阶段 - 为什么下面的代码不会产生相同的结果？

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