事件委托是利用事件冒泡将子元素事件交由父元素统一处理的技巧，通过e.target或closest()识别目标，减少绑定次数、支持动态元素、降低内存占用。
事件委托是利用事件冒泡机制，把子元素的事件监听逻辑统一交给父元素处理的一种技巧。它不只为减少重复绑定，更关键的是让动态添加的元素自动拥有事件响应能力，同时降低内存占用。
事件委托的核心原理
DOM事件会从目标元素逐级向上冒泡到根节点。只要父元素监听了某个事件，即使点击的是它的任意后代元素，也能在父元素的事件处理器中捕获并判断具体来源。
关键操作是使用 event.target 获取真正被点击的元素，再通过属性（如 class、data-*）或 DOM 方法（如 closest()）识别是否属于预期目标。
比逐个绑定更省资源
- 原来要给 100 个按钮分别 addEventListener → 现在只给它们的共同父容器绑 1 次
- 避免大量闭包和回调函数驻留内存，尤其适合列表项频繁增删的场景（如聊天记录、商品列表）
- 无需为新插入的元素重新绑定事件——只要结构符合委托规则，立即生效
一个实用的例子
假设有个待办列表：
java-api-doc-generator
下载
分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。
立即学习“Java免费学习笔记（深入）”；
- 买牛奶
- 还书
用事件委托代替循环绑定：
const list = document.getElementById('todo-list');list.addEventListener('click', (e) => {
if (e.target.classList.contains('item')) {
console.log('点击了：', e.target.textContent);
}
});
注意边界情况
- 确保父元素稳定存在，不要选 body 或 document 做委托（除非真有必要），优先选语义明确的直接容器
- 避免委托太深的嵌套，否则 event.target 可能是子子元素（比如 span 里有图标），建议用 e.target.closest('.item') 精准匹配
- 某些事件（如 focus、blur）不冒泡，不能委托；input 的 change 也不适合委托，推荐用 input 或 keyup 替代
基本上就这些。用对了，代码更轻，维护也更稳。
