事件流分为捕获、目标和冒泡三个阶段：首先从根节点向下传播至目标（捕获），触发捕获阶段监听器；到达目标元素时进入目标阶段，执行绑定在该元素的监听器；随后事件沿DOM树向上传播至根节点（冒泡），触发冒泡阶段监听器。通过addEventListener的第三个参数控制阶段（true为捕获，false为冒泡），利用event.eventPhase可判断当前阶段（1=捕获，2=目标，3=冒泡），并可通过stopPropagation()阻止传播。掌握此机制有助于精准控制事件响应与实现事件委托。
JavaScript中的事件流分为三个阶段：捕获阶段、目标阶段和冒泡阶段。理解这三个阶段的关键在于事件在DOM树中传播的顺序以及如何通过代码控制响应行为。
事件捕获阶段（Capture Phase）
当一个事件被触发时，它首先从最外层的祖先元素（如document或window）开始，逐级向下传递，直到达到事件的实际目标元素。这个过程称为“捕获”。
在该阶段，事件监听器如果设置为捕获模式，就会被触发。可以通过addEventListener的第三个参数设为true来启用捕获：
element.addEventListener(‘click’, handler, true);
例如点击一个嵌套很深的按钮，事件会先经过body、div等父级容器（如果它们注册了捕获监听器），再往下走。
立即学习“Java免费学习笔记（深入）”；
事件目标阶段（Target Phase）
当事件传播到达绑定事件的元素本身时，就进入了目标阶段。这是事件真正发生的节点。
无论监听器是在捕获还是冒泡阶段注册的，只要绑定在目标元素上，都会在此阶段执行。此时event.target指向该元素。
注意：如果多个监听器绑定在同一元素的同一事件上，它们会按照注册顺序依次执行，不再区分捕获或冒泡。
事件冒泡阶段（Bubbling Phase）
在目标阶段之后，事件会从目标元素开始，逐级向上传播回根节点，即父级、祖父级等祖先元素。这个过程叫“冒泡”。
大多数事件默认支持冒泡，比如click、input、keydown等。你可以通过addEventListener的第三个参数设为false（默认值）来在冒泡阶段监听事件：
element.addEventListener(‘click’, handler, false);
比如点击子元素，其父元素若绑定了click事件，也会被触发（除非阻止冒泡）。
如何区分与调试这三个阶段？
实际开发中可以通过以下方式清晰观察事件流程：
使用event.eventPhase属性判断当前处于哪个阶段： 1：捕获阶段 2：目标阶段 3：冒泡阶段 在不同层级的元素上分别添加监听器，并打印日志查看执行顺序 利用stopPropagation()或stopImmediatePropagation()控制传播行为
举例来说，给父子元素都绑定事件，在控制台输出event.eventPhase，就能清楚看到事件是从外到内（捕获），再到目标，最后由内到外（冒泡）的过程。
基本上就这些。掌握事件的三个阶段，有助于更精准地控制交互逻辑，避免意外触发，也能实现高效的事件委托。
以上就是JavaScript中的事件冒泡、捕获与目标阶段如何区分？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1529030.html
微信扫一扫 
支付宝扫一扫 
