事件流分捕获、目标、冒泡三阶段：捕获（外→内）、目标（触发元素）、冒泡（内→外）；关键区别是传播方向相反；例：点击button，若a用true、b/c用false，则输出a→c→b→a。

直接说清三阶段+关键区别+一个可落地的例子，比背定义更有效。

说清事件流的三个阶段

浏览器处理点击这类事件时，不是只在目标元素上响一下，而是走完整路径：先从window → document → body → 父元素（捕获阶段），再到达被点的那个元素（目标阶段），最后从它开始往回传到 window（冒泡阶段）。这个顺序是 W3C 标准，所有现代浏览器都一样。

抓住捕获和冒泡的核心差异

本质就一点：方向相反。

Expanso json-flatten

通过 CLI 或 MCP 服务器，使用 Expanso Edge 管道扁平化嵌套 JSON 对象。

下载

• 捕获是从外向内，适合“提前拦截”，比如在 document 层统一记录操作，或阻止某些区域的交互
• 冒泡是从内向外，是默认行为，也是事件委托能成立的基础
• 第三个参数 useCapture 决定监听时机：true 是捕获，false（或不写）是冒泡

用一个例子把概念串起来

假设 HTML 是

点我

：

• 给 a、b、c 都绑 click，且都用 false（冒泡）→ 点 button，输出顺序是 c → b → a
• 给 a 用 true、b 和 c 用 false → 输出是 a（捕获）→ c（目标）→ b（冒泡）→ a（冒泡）
• 在 c 的 handler 里调 e.stopPropagation() → 后续 b 和 a 的冒泡阶段都不会触发

顺带提一句实际价值

捕获用得少，但不是没用：比如全局快捷键监听、防误触遮罩层、表单校验前置拦截；冒泡是日常主力，事件委托就是靠它——列表项动态增删，不用反复绑定解绑，只在父容器监听，用 e.target 判断具体点的是谁。