5分钟搞懂事件委托

面试官问"事件委托"是什么？我用"班主任管全班"的例子让他直点头

动态添加的按钮无法绑定事件？写几十行 addEventListener 把自己写晕？

别怕，事件委托就是你的救星。今天我用最土的比喻 + 最全的代码，让你彻底搞懂它。

一、先看一段"翻车"代码

你做了一个待办清单，里面有个"删除"按钮，你正常绑定点击事件：

js 复制代码

document.querySelector('.delete-btn').addEventListener('click', () => {
  console.log('删除');
});

一开始几个待办是写死的，删除正常。后来你通过 JS 动态添加新的待办，发现新待办的删除按钮完全没反应。

原因很简单：绑定事件的时候，那些新按钮根本还没出生。你给一个不存在的人打电话，当然打不通。

二、了解"事件冒泡"：就是教室里放了一个屁

事件冒泡是事件委托的基础。简单说：

你点击页面上的某个元素，这个点击事件会像气泡一样，从当前元素一直往上冒，直到最顶层的 document。

举个例子：

html 复制代码

<div id="grandpa">
  <div id="father">
    <button id="son">点我</button>
  </div>
</div>

点击按钮，事件触发顺序：
button → #father → #grandpa → body → html → document

就像教室里某个角落放了一个屁，臭味先被旁边同学闻到，然后传遍全班，最后班主任也闻到了。

关键：你可以选择在任何一个祖先元素上"闻"到这个事件。

三、什么是事件委托？ ------ 班主任管全班

既然事件会冒泡，那我不把监听器直接绑在按钮上 ，而是绑在按钮的父容器（甚至更高层）。等事件冒上来了，我再看看这个事件到底是谁触发的，然后执行对应的操作。

生活类比：

传统做法：你给班级里每个学生发一部手机，有事直接打你电话。学生毕业了，手机号注销，新来的学生还得再办手机。累死。
事件委托 ：你只给班主任（父容器）配一部座机。所有学生打电话都先打给班主任，班主任再根据分机号（event.target）找到对应的学生。学生换了，分机号还在，永远不用重新配置。

四、代码实现：一个动态删除的待办清单

下面是一个完整的例子。你不必关心新增待办的逻辑，只看事件委托部分------只有一个监听器，却能处理所有动态添加的删除按钮。

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>事件委托演示｜动态删除待办</title>
  <style>
    body { background: #f0f2f5; display: flex; justify-content: center; padding: 2rem; font-family: system-ui; }
    .todo-app { background: white; border-radius: 1rem; padding: 1.5rem; width: 400px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
    .add-area { display: flex; gap: 8px; margin-bottom: 1rem; }
    input { flex: 1; padding: 8px; border: 1px solid #ccc; border-radius: 8px; }
    button { padding: 8px 16px; cursor: pointer; background: #1677ff; color: white; border: none; border-radius: 8px; }
    .delete-btn { background: #ff4d4f; margin-left: 12px; }
    ul { list-style: none; padding: 0; }
    li { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #eee; }
  </style>
</head>
<body>
<div class="todo-app">
  <h3>✅ 待办清单（事件委托演示）</h3>
  <div class="add-area">
    <input type="text" id="todoInput" placeholder="写一个待办...">
    <button id="addBtn">添加</button>
  </div>
  <ul id="todoList">
    <li>吃饭 <button class="delete-btn">删除</button></li>
    <li>睡觉 <button class="delete-btn">删除</button></li>
  </ul>
  <p style="font-size:12px; color:#888;">⭐ 试试添加新待办，删除按钮照样工作！</p>
</div>

<script>
  // 获取父容器
  const todoList = document.getElementById('todoList');
  const addBtn = document.getElementById('addBtn');
  const input = document.getElementById('todoInput');

  // 添加待办（动态生成新元素）
  function addTodo() {
    const text = input.value.trim();
    if (text === '') return;
    const li = document.createElement('li');
    li.innerHTML = `${text} <button class="delete-btn">删除</button>`;
    todoList.appendChild(li);
    input.value = '';
  }

  // 🔥 事件委托：监听 todoList 上的点击事件
  todoList.addEventListener('click', (event) => {
    // event.target 是实际点击的那个元素（比如按钮、文字等）
    const target = event.target;
    // 判断点击的是不是删除按钮（class 包含 delete-btn）
    if (target.classList && target.classList.contains('delete-btn')) {
      // 删除整个 li（父元素是 li）
      const li = target.closest('li');  // 找到最近的外层 li
      if (li) li.remove();
      console.log('删除了一个待办');
    }
  });

  addBtn.addEventListener('click', addTodo);
  input.addEventListener('keypress', (e) => {
    if (e.key === 'Enter') addTodo();
  });
</script>
</body>
</html>

解释核心三行：

todoList.addEventListener('click', ...) → 监听父容器，而不是每个按钮。
event.target → 你真正点到的那个元素（可能是按钮，也可能是文字）。
if (target.classList.contains('delete-btn')) → 只有点删除按钮时才删除对应的 <li>。

就这样，不管以后添加多少个新待办，删除功能永远正常，因为事件监听一直挂在 ul 上。

五、事件委托的三大好处

动态元素自动支持

后添加的子元素不需要重新绑定事件，省去大量 addEventListener 代码。
内存占用更低

原本需要给 100 个按钮绑定 100 个监听器，现在只需要 1 个父容器监听器。
代码更干净

不用写 for 循环去逐个绑定，也不用担心元素删除后内存泄漏。

六、什么时候用事件委托？什么时候不用？

用事件委托：

有很多同类元素需要相同事件（比如列表里的删除、选中复选框）
元素是动态添加/删除的
希望简化代码、提升性能

不用事件委托：

元素很少且是静态的（两三个按钮，直接绑就行）
你需要阻止事件冒泡（stopPropagation）的时候，委托反而会干扰
事件需要精确控制冒泡阶段（例如表单提交前验证）

七、补充：`closest` 方法的妙用

上面代码用了 target.closest('li')，这是个超级好用的 API：

element.closest(选择器) 会沿着元素本身及其祖先，找到第一个匹配选择器的元素。

比如你点到了删除按钮内部的 <span> 或文字，target 不是按钮本身，但 closest('.delete-btn') 能帮你找到上层的删除按钮，再 closest('li') 找到整个待办项。这样可以避免"点偏了导致删除失败"的 bug。

八、最后一句

事件委托不是一个高深的概念，它就是利用了事件冒泡的"偷懒大法"。记住这个口诀：

子元素动态跑，父容器监听到；
问 event.target 你是谁，再处理就对了。

赶紧把上面的代码复制到本地跑一跑，亲手添加几个新待办，然后点删除------你会爱上这种一劳永逸的感觉。

评论区留言：你曾经在哪个项目里用事件委托解决了大问题？分享出来，一起避坑～