事件传播机制

问题

页面 点击的时候不是有事件传递吗，事件传递的流程，在dom界面里面
（面试官进一步解释）在页面有很多节点，点击一个是经过一些流程，才传到固定的目标节点上去的，这中间是有一个事件传递流程的

回答

在前端开发中，点击事件的传递流程通常被称为事件传播机制，它分为三个阶段：捕获阶段、目标阶段和冒泡阶段。这个流程是基于DOM事件模型的。

1. 捕获阶段（Capture Phase）：

   • 事件从最顶层的祖先元素（通常是window对象）开始，向下传递到目标元素的过程。
   • 这个阶段允许父级元素在事件到达目标元素之前捕获该事件。
   • 如果你在这个阶段添加事件监听器，可以通过addEventListener的第三个参数设置为true来指定监听捕获阶段的事件。

2. 目标阶段（Target Phase）：

   • 事件到达目标元素并触发目标元素上的事件处理器。
   • 在这个阶段，事件只会被目标元素处理，不会进一步向父元素传播。

3. 冒泡阶段（Bubble Phase）：

   • 事件从目标元素开始，向上传播回到最顶层的祖先元素。
   • 这个阶段允许父级元素在事件冒泡过程中处理事件。
   • 默认情况下，大多数事件是冒泡的，但你可以通过在事件处理函数中调用event.stopPropagation()来阻止事件进一步冒泡。

事件传播的实际流程：

• 当用户在页面中点击一个元素时，事件会首先进入捕获阶段，从顶层元素逐级向下传递，直到目标元素。接着，事件进入目标阶段，在目标元素上被触发。最后，事件进入冒泡阶段，从目标元素向上级元素逐级传播，直到顶层元素。

一个例子来说明：

假设页面中有以下DOM结构：

<div id="parent">
  <button id="child">Click me</button>
</div>

当你点击button元素时，事件的传播流程如下：

1. 捕获阶段：window -> document -> html -> body -> #parent -> #child
2. 目标阶段：#child
3. 冒泡阶段：#child -> #parent -> body -> html -> document -> window

理解事件传播机制对于前端开发非常重要，因为它可以帮助开发者更好地控制事件处理逻辑，例如在复杂的UI中管理用户交互的行为。

参考文章：https://blog.csdn.net/lq313131/article/details/126507879