在 JavaScript 中，通过 addEventListener 的第三个参数设为 true 或使用 { capture: true } 可启用捕获阶段监听，使事件处理器在捕获阶段（从外层祖先向目标元素传播时）触发，适用于全局快捷键、权限检查等提前拦截场景。
在 JavaScript 中，通过 addEventListener 的第三个参数传入 true，就能开启捕获阶段监听。
capture 参数的作用
事件在 DOM 中传播分为三个阶段：捕获阶段 → 目标阶段 → 冒泡阶段。默认情况下（capture = false 或省略），监听器只在冒泡阶段触发；设为 true 后，监听器会在捕获阶段被调用，即从外层祖先元素向目标元素逐层深入时触发。
如何启用捕获监听
只需在调用 addEventListener 时，将第三个参数设为 true：
element.addEventListener('click', handler, true)- 也可以使用选项对象写法：
element.addEventListener('click', handler, { capture: true }) - 注意：不能混用布尔值和对象——
{ capture: true }是推荐方式，兼容性更好且可扩展
捕获阶段的实际表现
假设 HTML 结构是：<div id="outer"><div id="inner">点我</div></div>，两个元素都绑定 click 且都启用捕获：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
立即学习“Java免费学习笔记（深入）”；
- 点击
#inner时，先触发#outer的捕获监听器 - 再触发
#inner的捕获监听器（目标阶段也属于捕获期的延续） - 若还设置了冒泡监听，它们会在捕获之后、按由内向外顺序执行
捕获阶段的典型用途
捕获常用于需要“提前拦截”事件的场景：
- 全局快捷键处理（如
Esc关闭模态框），在外层容器监听，避免依赖目标元素聚焦 - 权限或条件检查（例如判断用户是否有操作权限），在父级统一拦截，阻止不符合条件的事件继续传播
- 与
stopPropagation()配合，在捕获阶段终止事件流，防止到达目标或触发冒泡
不复杂但容易忽略：捕获和冒泡是同一事件的两个方向，启用捕获不会影响冒泡行为，除非显式阻止。
