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

所以现在，我们已经应用了事件，当我们点击输出时，正如预期inner element的那样，应该如下

外拍！
内部点击！
外点击！

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

外点击！
外拍！

谁能解释为什么会这样？

Answer 1

在目标元素上，冒泡和捕获之间没有区别——事件处于目标阶段。在它上面注册的所有事件处理程序都将被触发，并且它们将按照它们被安装的顺序被触发。