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

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），事件是否总是在该元素上触发？那开始了传播周期？谢谢

Answer 1

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

Event.eventPhase 接口指示当前正在评估事件流的哪个阶段。
0：none，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>

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

In Event Propogation, how does the event know when to fire?

html

javascript

dom