Javascript 触发事件的节点上的事件捕获和冒泡阶段是相反的

更新：我使用的是Chrome，在Safari中，一切正常。 长话短说。我想我很了解js。决定参加一个测试来取悦我的自我和繁荣：

我们有

，并向其中添加了两个事件处理程序

addEventListener('click', handler1, false);
addEventListener('click', handler2, true);

问题：将首先执行哪个处理程序

Me：很简单，handler2正在捕获阶段工作，将首先执行

现实：执行顺序：

handler1

然后

handler2

所以，对于触发事件的节点，我们有一个冒泡阶段，先是冒泡阶段，然后是捕获阶段

换句话说，捕获阶段在冒泡后结束阶段开始

这与我们在考虑捕获和冒泡时所想象的情况相反：

事实上，这幅画应该是这样的：

有人知道/有任何解释吗

片段：

const input=document.querySelector（'#btn'）；
函数handler1（e）{alert（“来自handler1的Hi，阶段：冒泡”）}；
函数handler2（e）{alert（“来自handler2的Hi，阶段：捕获”）}；
input.addEventListener（'click'，handler1，false）；
input.addEventListener（'click'，handler2，true）

查看“eventPhase”的值，您可以看到它实际上处于“target”阶段。当到达目标时，捕获值使用什么并不重要，因为它既不是捕获阶段，也不是冒泡阶段。处理程序按其连接的顺序被调用


const input=document.querySelector（'#btn'）；
//e、 事件阶段：1=捕获2=目标3=冒泡
handler=（capture，e）=>console.log（`eventPhase:${e.eventPhase}，`，`phase${capture}`）；
函数handler1（e）{console.log（`eventPhase:${e.eventPhase}，`，“来自handler1的Hi，phase:Bubbling”）}；
函数handler2（e）{console.log（`eventPhase:${e.eventPhase}，`，“来自handler2的Hi，phase:Capturing”）}；
input.addEventListener（'click'，handler.bind（null，'doesntmatter1'），！！Math.round（Math.random（））；
input.addEventListener（'click'，handler1，false）；
input.addEventListener（'click'，handler.bind（null，'doesntmatter2'），！！Math.round（Math.random（））；
input.addEventListener（'click'，handler2，true）；
input.addEventListener（'click'，handler.bind（null，'doesntmatter3'），！！Math.round（Math.random（））；
document.body.addEventListener（'click'，handler.bind（null，'Bubbling'），false）；
document.body.addEventListener（'click'，handler.bind（null，'Capturing'），true）