面试官问“事件委托”是什么？我用“班主任管全班”的例子让他直点头
动态添加的按钮无法绑定事件？写几十行
addEventListener把自己写晕？
别怕，事件委托就是你的救星。今天我用最土的比喻 + 最全的代码，让你彻底搞懂它。
一、先看一段“翻车”代码
你做了一个待办清单，里面有个“删除”按钮，你正常绑定点击事件：
document.querySelector('.delete-btn').addEventListener('click', () => {
console.log('删除');
});
一开始几个待办是写死的，删除正常。后来你通过 JS 动态添加新的待办，发现新待办的删除按钮完全没反应。
原因很简单：绑定事件的时候，那些新按钮根本还没出生。你给一个不存在的人打电话，当然打不通。
二、了解“事件冒泡”：就是教室里放了一个屁
事件冒泡是事件委托的基础。简单说：
你点击页面上的某个元素，这个点击事件会像气泡一样，从当前元素一直往上冒，直到最顶层的
document。
举个例子：
<div id="grandpa">
<div id="father">
<button id="son">点我</button>
</div>
</div>
点击按钮，事件触发顺序：
button → #father → #grandpa → body → html → document
就像教室里某个角落放了一个屁，臭味先被旁边同学闻到，然后传遍全班，最后班主任也闻到了。
关键：你可以选择在任何一个祖先元素上“闻”到这个事件。
三、什么是事件委托？ —— 班主任管全班
既然事件会冒泡，那我不把监听器直接绑在按钮上，而是绑在按钮的父容器（甚至更高层）。等事件冒上来了，我再看看这个事件到底是谁触发的，然后执行对应的操作。
生活类比：
- 传统做法：你给班级里每个学生发一部手机，有事直接打你电话。学生毕业了，手机号注销，新来的学生还得再办手机。累死。
- 事件委托：你只给班主任（父容器）配一部座机。所有学生打电话都先打给班主任，班主任再根据分机号（
event.target）找到对应的学生。学生换了，分机号还在，永远不用重新配置。
四、代码实现：一个动态删除的待办清单
下面是一个完整的例子。你不必关心新增待办的逻辑，只看事件委托部分——只有一个监听器，却能处理所有动态添加的删除按钮。
<!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你是谁，再处理就对了。
赶紧把上面的代码复制到本地跑一跑，亲手添加几个新待办，然后点删除——你会爱上这种一劳永逸的感觉。
评论区留言：你曾经在哪个项目里用事件委托解决了大问题？分享出来，一起避坑～