event.eventphase属性返回1、2、3分别表示捕获阶段、目标阶段、冒泡阶段；其值取决于事件传播位置及监听器注册时的capture参数，目标阶段恒为2，与capture设置无关。

在 JavaScript 中，可以通过事件对象的 event.eventPhase 属性判断当前事件处于捕获阶段还是冒泡阶段。

使用 event.eventPhase 判断阶段

event.eventPhase 是一个只读属性，返回一个整数，表示事件当前所处的阶段：

• 1：CAPTURING_PHASE（捕获阶段）
• 2：AT_TARGET（目标阶段，即事件到达绑定元素本身）
• 3：BUBBLING_PHASE（冒泡阶段）

注意：该值在事件处理函数执行时是动态确定的，取决于注册监听器时是否启用捕获（即第三个参数 true 或 {capture: true}），以及事件当前传播到的位置。

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

配合 addEventListener 的 capture 参数理解

只有当监听器注册时启用了捕获（addEventListener(type, handler, true) 或 addEventListener(type, handler, {capture: true})），才可能在捕获阶段触发。否则，默认只在冒泡阶段响应（除非显式设置 useCapture = false 或省略）。

• 在捕获阶段注册的监听器：可能在 eventPhase === 1 时执行
• 在目标节点上注册的监听器（无论是否捕获）：执行时 eventPhase === 2
• 在冒泡阶段注册的监听器：通常在 eventPhase === 3 时执行（目标之后的祖先元素上）

实际检测示例

假设 HTML 结构为：<div id="outer"><div id="inner">click me</div></div>

const outer = document.getElementById('outer');
const inner = document.getElementById('inner');

outer.addEventListener('click', e => {
  console.log('outer (bubble):', e.eventPhase); // 3（冒泡阶段）
}, false);

outer.addEventListener('click', e => {
  console.log('outer (capture):', e.eventPhase); // 1（捕获阶段）
}, true);

inner.addEventListener('click', e => {
  console.log('inner (target):', e.eventPhase); // 2（目标阶段）
}, true); // 即使设为 capture，目标阶段仍是 2

常见误区提醒

• 不能仅靠 addEventListener 的第三个参数反推 eventPhase：比如在目标元素上用 {capture: true} 注册，执行时仍是 eventPhase === 2
• eventPhase 不等于是否阻止传播：调用 e.stopPropagation() 会影响后续阶段，但不改变当前 eventPhase 值
• 没有单独的布尔属性如 isCapturing：必须通过比对 e.eventPhase === Event.CAPTURING_PHASE 来判断

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南