事件冒泡、捕获与目标阶段详解

从现在开始，努力学习吧！本文《事件冒泡、捕获与目标阶段如何区分？》主要讲解了等等相关知识点，我会在golang学习网中持续更新相关的系列文章，欢迎大家关注并积极留言建议。下面就先一起来看一下本篇正文内容吧，希望能帮到你！

事件流分为捕获、目标和冒泡三个阶段：首先从根节点向下传播至目标（捕获），触发捕获阶段监听器；到达目标元素时进入目标阶段，执行绑定在该元素的监听器；随后事件沿DOM树向上传播至根节点（冒泡），触发冒泡阶段监听器。通过addEventListener的第三个参数控制阶段（true为捕获，false为冒泡），利用event.eventPhase可判断当前阶段（1=捕获，2=目标，3=冒泡），并可通过stopPropagation()阻止传播。掌握此机制有助于精准控制事件响应与实现事件委托。

JavaScript中的事件流分为三个阶段：捕获阶段、目标阶段和冒泡阶段。理解这三个阶段的关键在于事件在DOM树中传播的顺序以及如何通过代码控制响应行为。

事件捕获阶段（Capture Phase）

当一个事件被触发时，它首先从最外层的祖先元素（如document或window）开始，逐级向下传递，直到达到事件的实际目标元素。这个过程称为“捕获”。

在该阶段，事件监听器如果设置为捕获模式，就会被触发。可以通过addEventListener的第三个参数设为true来启用捕获：

例如点击一个嵌套很深的按钮，事件会先经过body、div等父级容器（如果它们注册了捕获监听器），再往下走。

事件目标阶段（Target Phase）

当事件传播到达绑定事件的元素本身时，就进入了目标阶段。这是事件真正发生的节点。

无论监听器是在捕获还是冒泡阶段注册的，只要绑定在目标元素上，都会在此阶段执行。此时event.target指向该元素。

注意：如果多个监听器绑定在同一元素的同一事件上，它们会按照注册顺序依次执行，不再区分捕获或冒泡。

事件冒泡阶段（Bubbling Phase）

在目标阶段之后，事件会从目标元素开始，逐级向上传播回根节点，即父级、祖父级等祖先元素。这个过程叫“冒泡”。

大多数事件默认支持冒泡，比如click、input、keydown等。你可以通过addEventListener的第三个参数设为false（默认值）来在冒泡阶段监听事件：

比如点击子元素，其父元素若绑定了click事件，也会被触发（除非阻止冒泡）。

如何区分与调试这三个阶段？

实际开发中可以通过以下方式清晰观察事件流程：

• 使用event.eventPhase属性判断当前处于哪个阶段：
  • 1：捕获阶段
  • 2：目标阶段
  • 3：冒泡阶段
• 在不同层级的元素上分别添加监听器，并打印日志查看执行顺序
• 利用stopPropagation()或stopImmediatePropagation()控制传播行为

举例来说，给父子元素都绑定事件，在控制台输出event.eventPhase，就能清楚看到事件是从外到内（捕获），再到目标，最后由内到外（冒泡）的过程。

基本上就这些。掌握事件的三个阶段，有助于更精准地控制交互逻辑，避免意外触发，也能实现高效的事件委托。

终于介绍完啦！小伙伴们，这篇关于《事件冒泡、捕获与目标阶段详解》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！