JavaScript Academy · 课时

事件委托模式

Q: 「事件委托模式」这节课中我会学到什么？

通过一个父级监听器处理多个子元素的事件。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

通过一个父级监听器处理多个子元素的事件。

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

一个监听器统管一切

事件委托是指将单个监听器附加到共同的祖先元素上，而不是将许多监听器附加到各个子元素上。由于事件会冒泡，父元素可以接收到其所有后代元素触发的点击。

<ul id="menu">
  <li>Home</li>
  <li>About</li>
  <li>Contact</li>
</ul>

朴素方法

如果不使用委托，您需要遍历每个项目并附加一个处理函数。这很浪费：会占用更多内存，而且对后来添加的元素不起作用。

document.querySelectorAll("#menu li").forEach((li) => {
  li.addEventListener("click", () => console.log(li.textContent));
});

委托方法

相反，应将一个监听器附加到父元素上，并检查 event.target，找出被点击的子元素。

const menu = document.getElementById("menu");
menu.addEventListener("click", (e) => {
  console.log(e.target.textContent);
});

匹配正确的目标

点击可能落在嵌套元素上。使用 event.target.closest(selector) 向上查找，找到与您的选择器匹配的相关祖先元素。

menu.addEventListener("click", (e) => {
  const item = e.target.closest("li");
  if (!item) return; // clicked outside any li
  console.log("Clicked:", item.textContent);
});

使用检查进行保护

始终要防止处理不匹配的点击。if (!item) return; 提前退出，可避免用户点击容器内的内边距或间隙时导致处理函数崩溃。

menu.addEventListener("click", (e) => {
  const item = e.target.closest("li");
  if (!item || !menu.contains(item)) return;
  handleSelect(item);
});

使用数据属性

一种常见模式是使用 data-* 属性，在每个项目上存储标识符或操作。委托处理函数会从匹配的元素中读取它。

menu.addEventListener("click", (e) => {
  const item = e.target.closest("li");
  if (!item) return;
  const id = item.dataset.id;   // reads data-id
  console.log("Selected id:", id);
});

按操作分发

对于包含许多按钮的工具栏，请为每个按钮设置一个 data-action，并根据它进行分支判断。一个监听器即可处理所有按钮。

toolbar.addEventListener("click", (e) => {
  const btn = e.target.closest("button");
  if (!btn) return;
  switch (btn.dataset.action) {
    case "save": save(); break;
    case "delete": remove(); break;
  }
});

为何能够扩展

使用委托时，包含 1000 行的列表只需要一个监听器，而不是 1000 个。这样可以减少内存占用、加快设置速度，并且行发生变化时不需要清理循环。

性能提示

委托确实有一项小开销：每个匹配的事件都会运行您的处理函数，然后由它进行筛选。对于大多数应用来说，与节省的开销相比，这可以忽略不计；但对于 mousemove 这类高频事件，请避免将委托监听器附加到 document 上。

选择容器

选择包含所有目标的最近稳定祖先元素。将事件委托给范围较小的容器（列表本身）比委托给 document 更好，因为触发处理函数的无关事件更少。

const list = document.querySelector(".task-list");
list.addEventListener("click", onTaskClick);

与 closest 结合使用

closest() 是事件委托的核心。如果元素自身匹配，它会返回该元素；否则返回最近的匹配祖先元素，或者返回 null。这使得委托处理嵌套标记更加安全。

const cell = e.target.closest("td[data-col]");
if (cell) console.log(cell.dataset.col);

快速检查

为什么要使用事件委托？

回顾

事件委托会将一个监听器附加到父元素，并利用冒泡处理所有子元素。使用 e.target.closest(selector) 找到相关元素，使用提前返回进行保护，并读取 data-* 属性来分发操作。它可以扩展到包含大量项目的列表，是动态用户界面的标准模式。

常见问题解答

「事件委托模式」课时是免费的吗？

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

「事件委托模式」这节课中我会学到什么？

通过一个父级监听器处理多个子元素的事件。你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

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

「事件委托模式」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 JavaScript Academy