javascript - 在没有子节点的 html 元素上，事件捕获阶段未按预期工作

Question

让我们考虑下面的 html

<div id='outer'>
    Outer Tag
    <div id='inner'>Inner Tag</div>
</div>

应用事件

var outer = document.getElementById('outer'),
    inner = document.getElementById('inner');

outer.addEventListener('click',function(){
   console.log('Outer Clicked!')
}, false);

outer.addEventListener('click',function(){
   console.log('Outer Captured!')
}, true); // event capture flag set to true

inner.addEventListener('click',function(){
   console.log('Inner Clicked!')
}, false);

现在，我们已经应用了事件，并且正如我们预期的那样，当我们点击内部元素时，输出应该如下所示

Outer Captured!
Inner Clicked!
Outer Clicked!

但是如果我们从上面的 html 中删除 inner span 那么捕获阶段似乎是在冒泡阶段之后触发的，如下所示

Outer Clicked!
Outer Captured!

谁能解释为什么会这样？

Answer 1

在目标元素上，冒泡和捕获之间没有区别 - 事件在 target phase 中.在其上注册的所有事件处理程序都将被触发，并且它们将按照安装的顺序被触发。