Javascript 捕获阶段与气泡阶段-为什么要使用以下代码；结果不一样吗？

我想用纯Javascript实现我自己的DnD——首先是为了学习——然后也许我会使用它——我偶然发现了这个冒泡/捕获概念。通过阅读关于这个问题的公认答案：，以及其他文章，我认为我得到了答案

但是我没有——因为我无法解释为什么这两段代码不能产生相同的结果

为什么我注册此事件的顺序很重要？ 我假设，根据捕获/冒泡的规则，它们应该按照相同的顺序被激发——不管它们是如何注册的。事实并非如此

如果单击div3，则会发生以下情况：

案例1：

案例2：

案例3——这是最重要的

Html是一样的：

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

我的想法中的谬误在哪里？我错过了什么？谢谢：）

问题就在这里

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

一定是

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

---

问题在于变量的声明

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

---

单击我

在两个示例中，您都声明了

var div2

两次。@DavidDomain噢，不！你说得太对了！：）愚蠢的错误-现在该怎么处理这个问题-我可以删除它吗？太尴尬了……）@别担心，没有人是完美的。这只是一个小事情经常被忽视的完美例子

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

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