event.eventPhase 属性返回事件当前所处阶段：1 为捕获阶段，2 为目标阶段，3 为冒泡阶段；其值取决于事件流位置和监听器注册方式（useCapture 参数），常用于调试或条件逻辑。
JavaScript 中可以通过事件对象的 event.eventPhase 属性判断当前事件所处的阶段，从而明确事件正处于捕获、目标还是冒泡阶段。
event.eventPhase 的三个可能值
eventPhase 是只读属性，返回一个整数，对应以下常量（定义在 Event 接口上）：
- Event.CAPTURING_PHASE（值为 1）：事件正从根节点向下传递，处于捕获阶段；
- Event.AT_TARGET（值为 2）：事件已到达绑定事件监听器的目标元素本身；
- Event.BUBBLING_PHASE（值为 3）：事件正从目标元素向上传递，处于冒泡阶段。
结合 addEventListener 的 useCapture 参数使用
该属性的实际意义依赖于监听器注册方式。只有当监听器在捕获阶段或冒泡阶段被触发时，eventPhase 才能体现差异：
- 若用
addEventListener('click', handler, true)注册——监听器在捕获阶段触发，此时 eventPhase === Event.CAPTURING_PHASE（除非目标自身）； - 若用
addEventListener('click', handler, false)或省略第三个参数——监听器在冒泡阶段触发，此时对非目标元素，eventPhase === Event.BUBBLING_PHASE； - 无论哪种注册方式，只要事件发生在当前元素（即
e.target === e.currentTarget），eventPhase 都是 Event.AT_TARGET。
一个直观的 DOM 结构示例
假设 HTML 如下：
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
立即学习“Java免费学习笔记（深入）”；
<div id="outer"><div id="inner">点击我</div>
</div>
JS 绑定：
document.getElementById('outer').addEventListener('click', e => {console.log('outer:', e.eventPhase); // 1（捕获）/ 3（冒泡）/ 2（目标）
}, true); // 捕获
document.getElementById('inner').addEventListener('click', e => {
console.log('inner:', e.eventPhase); // 总是 2（因为是目标）
}); // 冒泡（默认）
点击 inner 元素时输出顺序和值取决于监听器位置与注册方式，但 inner 上的监听器中 e.eventPhase 恒为 2。
注意 eventPhase ≠ 事件是否冒泡或可取消
eventPhase 描述的是“此刻事件流走到哪了”，不表示事件是否正在冒泡传播，也不影响 stopPropagation() 或 preventDefault() 的行为。它只是观测工具，常用于调试、条件逻辑（如仅在捕获阶段执行某初始化）、或实现自定义事件委托策略。
