事件委托是将子元素事件监听器绑定到父元素，利用事件冒泡和event.target精准识别目标元素，减少监听器数量、降低内存开销与DOM操作压力，适用于动态列表、表格、菜单等场景。
事件委托（也叫事件代理）是指把本该绑定在子元素上的事件监听器，改绑到它们的父元素上，依靠事件冒泡机制来统一处理子元素的事件。
事件委托的核心原理
它依赖浏览器原生的事件冒泡行为：当点击一个子元素（比如 ），事件会从该元素逐层向上传播到父元素、body，甚至 document。父元素上的监听器就能捕获这个冒泡上来的事件，再通过 event.target 或 event.target.closest() 精准识别出真正被点击的是哪个子元素。
- 不需要给每个子元素单独添加
addEventListener - 监听逻辑集中在一处，用条件判断区分不同目标
- 即使后续动态插入新子元素，也不需要重新绑定事件
为什么能提升 JavaScript 应用性能
关键在于大幅减少事件监听器的数量和内存开销，尤其在大量同类元素场景下效果显著。
- 100 个按钮各自绑定 click 监听器 → 创建 100 个独立函数对象，占用更多内存
- 改用事件委托 → 只需 1 个监听器，函数对象只创建一次
- DOM 更新频繁时（如列表滚动、分页加载），避免反复 add/remove 事件，降低重排重绘压力
- 初始化阶段耗时下降，页面响应更快，低端设备表现更稳定
典型适用场景
不是所有地方都适合，但以下情况强烈推荐使用事件委托：
- 动态生成的列表（如搜索结果、评论流、商品瀑布流）
- 表格中每行或每单元格需要响应点击、双击等操作
- 菜单项、标签页、选项卡等结构重复、数量不确定的 UI 组件
- 需要频繁增删子节点的容器（如可编辑的代办清单）
简单写法示例
比如处理一个待办列表：
const list = document.getElementById('todo-list');
list.addEventListener('click', function(e) {
if (e.target.matches('button.delete')) {
e.target.closest('li').remove();
}
});
这样无论新增多少条目，删除按钮都能立即响应，无需额外绑定。
