事件捕获是事件流的起始阶段，从document逐级向下传递到目标元素，通过addeventlistener第三个参数设为true启用；完整顺序为捕获→目标→冒泡，目标阶段只触发一次，但若同时绑定捕获和冒泡监听器则两者均执行。
JavaScript 中事件捕获是事件流的起始阶段，它从最外层祖先元素（如 document）开始，逐级向下传递到目标元素。与默认的事件冒泡相反，捕获阶段允许你在事件到达目标前就进行拦截和处理。
如何启用事件捕获
在 addEventListener() 方法中，将第三个参数设为 true 即可开启捕获模式：
element.addEventListener('click', handler, true);如果不传或传 false（或省略），则使用冒泡模式（默认行为）。
事件流完整执行顺序：捕获 → 目标 → 冒泡
一个点击事件会按以下三阶段执行：
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
-
捕获阶段：从
document→html→body→ 父容器 → …… → 直接父元素（不包括目标自身） -
目标阶段：到达绑定事件的目标元素本身（此时
event.target === event.currentTarget） -
冒泡阶段：从目标元素 → 直接父元素 → …… →
body→html→document
注意：目标阶段只触发一次，但若目标上同时绑定了捕获和冒泡监听器，两者都会执行（捕获先于冒泡）。
捕获与冒泡共存时的实际执行顺序
假设 DOM 结构为：<div id="outer"><div id="inner"></div></div>，并添加如下监听器：
document.addEventListener('click', () => console.log('document - capture'), true);
outer.addEventListener('click', () => console.log('outer - capture'), true);
inner.addEventListener('click', () => console.log('inner - capture'), true);
inner.addEventListener('click', () => console.log('inner - bubble'), false);
outer.addEventListener('click', () => console.log('outer - bubble'), false);
document.addEventListener('click', () => console.log('document - bubble'), false);
点击 #inner 后输出顺序为：
- document - capture
- outer - capture
- inner - capture
- inner - bubble
- outer - bubble
- document - bubble
常用场景与注意事项
- 捕获常用于全局拦截，比如在
document上捕获所有点击，提前阻止某些操作（如禁用右键菜单、拦截表单提交） - 调用
event.stopPropagation()可在捕获阶段中断后续流程（包括目标和冒泡阶段） -
event.stopImmediatePropagation()还能阻止同一阶段其他同类型监听器执行 - 不是所有事件都支持捕获（例如
focus、blur不冒泡，也不推荐在捕获中处理它们）
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
