JavaScript Academy · 课时

捕获阶段与冒泡阶段

Q: 「捕获阶段与冒泡阶段」这节课中我会学到什么？

了解事件如何穿过 DOM。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

了解事件如何穿过 DOM。

捕获阶段与冒泡阶段 是 CoddyKit 上的免费 JavaScript Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 JavaScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 JavaScript Academy 课程共包含 4 节课。

事件在 DOM 中的两次传播

点击元素时，事件不只会在该元素上触发。它会经历 DOM 树中的两个阶段：捕获阶段（从上到下，从 document 到目标元素）和冒泡阶段（从下到上，从目标元素返回 document）。

<div id="outer">
  <button id="inner">Click</button>
</div>

默认行为：冒泡

默认情况下，addEventListener 会在冒泡阶段监听。点击内部按钮时，会先触发它的处理器，然后触发父元素的处理器，再触发祖父元素的处理器，如此向上直到 document。

inner.addEventListener("click", () => console.log("inner"));
outer.addEventListener("click", () => console.log("outer"));
// Click inner -> logs: "inner" then "outer"

选择捕获阶段

传入第三个参数 true（或 { capture: true }），即可改为在捕获阶段监听。捕获处理器会从上到下运行，先于任何冒泡处理器。

outer.addEventListener("click", () => console.log("outer capture"), true);
inner.addEventListener("click", () => console.log("inner bubble"));
// Click inner -> "outer capture" then "inner bubble"

完整顺序

对于在 #inner 上发生的点击，如果两个阶段都设置了处理器，顺序为：从上到下的捕获阶段，然后是目标元素，最后是从下到上的冒泡阶段。

文档捕获
外层捕获
内部元素（目标）
外层冒泡
文档冒泡

event.target 与 event.currentTarget

event.target 是实际触发事件的元素（也就是发生点击的位置）。event.currentTarget 是当前正在运行其监听器的元素。在冒泡阶段的父元素处理器中，两者并不相同。

outer.addEventListener("click", (e) => {
  console.log(e.target.id);        // "inner" - where click occurred
  console.log(e.currentTarget.id); // "outer" - listener owner
});

停止传播

event.stopPropagation() 会停止传播：事件不会继续传递到当前阶段中的下一个元素。树中更高层级的父元素处理器也不会运行。

inner.addEventListener("click", (e) => {
  e.stopPropagation();
  console.log("handled here only");
});
outer.addEventListener("click", () => console.log("never runs"));

stopImmediatePropagation

stopPropagation() 仍会让同一元素上的其他监听器运行。若还要阻止同一元素上的同级监听器，请使用 event.stopImmediatePropagation()。

inner.addEventListener("click", (e) => {
  e.stopImmediatePropagation();
  console.log("first only");
});
inner.addEventListener("click", () => console.log("blocked"));

preventDefault 不同于其他方法

不要将 preventDefault() 与 stopPropagation() 混淆。preventDefault() 会取消浏览器的默认操作（跟随链接、提交表单），但 NOT 会阻止事件继续冒泡。

link.addEventListener("click", (e) => {
  e.preventDefault();  // do not navigate
  // event still bubbles to parents
});

捕获阶段为何很少使用

大多数代码使用冒泡，因为这符合直觉：具体元素先做出响应，然后容器才得知此事。当父元素需要在子元素看到事件之前拦截或否决事件时，捕获阶段很有用。

检查阶段

event.eventPhase 会告诉您当前处于哪个阶段：1 表示捕获，2 表示处于目标阶段，3 表示冒泡。这很少需要用到，但在调试复杂的监听器链时很有帮助。

el.addEventListener("click", (e) => {
  console.log(e.eventPhase); // 1, 2, or 3
}, true);

并非所有事件都会冒泡

大多数用户界面事件（click、input、keydown）都会冒泡。少数事件默认不会冒泡，例如 focus、blur 和 mouseenter。对于这些事件，请使用会冒泡的变体（focusin、focusout）或捕获阶段。

快速检查

测试您对事件阶段的理解。

回顾

事件先捕获（向下传播），再冒泡（向上传播）。监听器默认使用冒泡；传入 true 可使用捕获。e.target 是事件起点，e.currentTarget 是监听器所属的元素。使用 stopPropagation() 可停止传播，使用 preventDefault() 可取消默认操作。这两个阶段是事件委托的基础。

常见问题解答

「捕获阶段与冒泡阶段」课时是免费的吗？

是的 — 「捕获阶段与冒泡阶段」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 JavaScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 JavaScript Academy 课程共包含 4 节课。

「捕获阶段与冒泡阶段」这节课中我会学到什么？

了解事件如何穿过 DOM。你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 JavaScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「捕获阶段与冒泡阶段」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 JavaScript Academy 课中编写并运行代码吗？

能。每节 JavaScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 JavaScript Academy