事件传播分捕获（从window到目标）和冒泡（从目标到window）两阶段；默认监听在冒泡阶段，捕获需显式传true；stopPropagation()阻止后续传播，stopImmediatePropagation()还阻止同阶段其他监听器；preventDefault()仅取消默认行为。

事件冒泡和捕获是 JavaScript 中事件传播的两个阶段，决定了事件在 DOM 树中如何从一个元素传递到另一个元素。理解它们，才能准确控制点击、输入等行为的响应范围，避免误触发。

事件捕获：从外向内“预览”

当事件发生时，浏览器先从 window 开始，逐级向下经过父元素，直到目标元素本身——这个过程叫捕获阶段。它像一次“提前巡查”，默认不执行绑定的处理函数（除非显式指定）。

要利用捕获阶段，给 addEventListener 的第三个参数传 true：

element.addEventListener('click', handler, true);

事件冒泡：从内向外“上报”

捕获结束后，事件会从目标元素开始，逐级向上经过父元素，直到 document 或 window——这就是冒泡阶段。日常开发中绝大多数事件监听（如 onclick 属性或没写第三个参数的 addEventListener）都发生在冒泡阶段。

立即学习“Java免费学习笔记（深入）”；

Java 接口排错助手

在调试 Java 后端 API 故障时使用此技能，尤其适用于以下任务：分析日志、跨 Controller、Service 和 Mapper 层追踪请求、定位异常根因、检查 SQL 执行或参数流转，以及生成简洁的诊断结论与修复方案。

下载

例如：点击一个按钮，它的父 div、再上层的 section，甚至 body 都可能收到这个点击事件。

如何阻止事件继续传播

调用事件对象的 stopPropagation() 方法，可立即中断当前阶段（捕获或冒泡）的后续传递：

• 在捕获阶段调用 → 后续捕获和整个冒泡阶段都不再触发
• 在冒泡阶段调用 → 冒泡停止向上，但不影响已发生的捕获

注意：stopImmediatePropagation() 更进一步，还会阻止同一阶段其他监听器执行（比如多个 addEventListener 绑定在同一元素、同一阶段）。

顺便提一下：阻止默认行为 ≠ 阻止传播

preventDefault() 只是取消事件的默认效果（比如点击链接不跳转、表单不提交），不影响事件传播。它和 stopPropagation() 是独立的，可以同时使用。