在事件传播中，事件如何知道何时触发?

Question

在以下代码中:

<div onClick={() => console.log('outer div')}>
<div onClick={() => console.log('middle div')}>
<div onClick={() => console.log('innermost div')}>
Click me!
</div>
</div>
</div>

我知道事件对象拥有一个target属性，该属性包含对发生事件的DOM节点的引用。我的问题是:在捕获(当捕获设置为true时)和冒泡阶段，如果HTML元素包含启动传播周期的相同HTML属性(例如onClick, onHover)，该事件是否总是在HTML元素上触发?谢谢。

Answer 1

是。
如果一个HTML元素包含相同的HTML属性，则该事件总是在该元素上触发。
在下面的代码中，您可以看到在特定节点上触发事件的哪个阶段。

• Event.eventPhase接口指示当前正在评估事件流的哪个阶段。
  0:无，1:捕获，2:目标，3:冒泡

// true: capturing / false: bubbling
const useCature = true;
const phase = (e) => {
const phases = ["capturing", "target", "bubbling"];
const node = `${e.currentTarget.nodeName} .${e.currentTarget.className}`;
console.log(node, phases[e.eventPhase - 1]);
};
document.querySelector(".outer").addEventListener("click", phase, useCature);
document.querySelector(".middle").addEventListener("click", phase, useCature);
document.querySelector(".inner").addEventListener("click", phase, useCature);

<div class="outer">
<div class="middle">
<div class="inner">
Click me!
</div>
</div>
</div>