事件传播分捕获、目标、冒泡三阶段；默认监听冒泡阶段，设capture为true可监听捕获阶段；stoppropagation阻止传播，preventdefault取消默认行为；捕获适合全局拦截，冒泡适合事件委托。
事件冒泡和事件捕获是 JavaScript 中事件传播的两个阶段，它们决定了事件如何在 DOM 树中传递。默认情况下，大多数事件监听器只响应**冒泡阶段**；但通过设置参数，可以主动监听**捕获阶段**，甚至阻止传播路径继续进行。
理解事件传播的三个阶段
当用户触发一个事件（比如点击按钮），该事件会按顺序经历三个阶段：
-
捕获阶段：事件从
document开始，逐层向下传递到目标元素（如按钮） - 目标阶段：事件到达绑定事件的目标元素本身
-
冒泡阶段：事件从目标元素逐层向上传递回
document
注意：目标阶段既属于捕获也属于冒泡，但通常被单独看待；addEventListener 的第三个参数决定监听的是捕获还是冒泡阶段。
如何选择监听阶段
使用 addEventListener 时，第三个参数控制监听时机：
Java JDK 25
下载
Java JDK 25 来自 OpenJDK 官方归档，版本为 JDK 25，本条下载地址已指向官方 Windows x64 zip 安装包直链，适合调试旧项目或兼容旧版 Java 运行环境。
- 省略或设为
false（默认）→ 监听冒泡阶段 - 设为
true→ 监听捕获阶段 - 传入对象（如
{capture: true}）→ 更灵活配置，支持其他选项（如once、passive）
例如：elem.addEventListener('click', handler, true); —— 在捕获阶段执行elem.addEventListener('click', handler); —— 在冒泡阶段执行
阻止事件传播的常用方法
如果不想让事件继续向上传播（冒泡）或向下传递（捕获），可用以下方法：
-
event.stopPropagation()：阻止事件继续沿当前路径传播（不影响同一阶段其他监听器） -
event.stopImmediatePropagation()：不仅阻止传播，还立即终止当前事件上其余监听器的执行 -
event.cancelBubble = true：旧式写法，等效于stopPropagation()，兼容性更好但不推荐新项目使用
注意：stopPropagation() 不影响默认行为（如表单提交、链接跳转），如需取消默认行为，应配合 event.preventDefault() 使用。
实际开发中的典型用法
不同阶段适合不同场景：
-
捕获阶段常用于全局拦截：比如在
document上监听点击，统一处理模态框关闭、权限校验等，避免每个子元素重复绑定 -
冒泡阶段更常用且安全：多数交互逻辑（按钮点击、列表项选中）都绑定在具体元素上，依赖冒泡可简化事件委托（如给父容器绑定 click，通过
event.target判断真正被点击的子元素） -
慎用阻止传播：过度使用
stopPropagation()可能破坏预期行为，尤其在组件化开发中，父组件可能依赖子组件事件冒泡做统一处理
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
