事件委托是利用事件冒泡机制将监听器绑定在父元素上以统一管理子元素事件的技术，可减少内存占用、避免重复绑定、提升性能，适用于列表、表格等动态内容场景，但focus/blur等不冒泡事件不可用。
事件委托是一种利用事件冒泡机制，将事件监听器绑定在父元素上，而不是为每个子元素单独绑定，从而实现对动态添加或大量子元素的统一事件管理的技术。它能显著减少内存占用和 DOM 操作，提升页面性能。
事件委托的核心原理：依赖事件冒泡
当用户触发子元素上的事件（如点击），该事件会沿着 DOM 树逐级向上传播到父元素。借助这一特性，我们只需在父容器上监听一次事件，再通过 event.target 判断实际被点击的是哪个子元素，从而执行对应逻辑。
- 不需要为每个按钮、列表项或卡片单独调用 addEventListener
- 即使后续用 JS 动态插入新元素，也不需要重新绑定事件
- 避免因频繁绑定/解绑导致的内存泄漏风险
典型使用场景：列表、表格、动态内容区域
比如一个有 100 个 <li> 的菜单，传统做法要绑定 100 次 click；用事件委托只需绑定 1 次到 <ul> 上：
const ul = document.getElementById('menu');
ul.addEventListener('click', function(e) {
if (e.target.tagName === 'LI') {
console.log('点击了:', e.target.textContent);
}
});
性能提升的关键点
- 减少监听器数量：从 N 个降为 1 个，降低浏览器事件系统开销
- 节省内存：每个监听器都占用内存，尤其在 SPA 中长期驻留时更明显
- 简化 DOM 更新逻辑：新增/删除子节点无需关心事件绑定状态
- 避免重复初始化：组件复用或局部刷新时，不用反复调用事件注册代码
注意事项与常见陷阱
事件委托不是万能的，需注意适用边界：
立即学习“Java免费学习笔记（深入）”；
- 某些事件（如 focus、blur、mouseenter）不冒泡，不能直接委托
- 确保父容器稳定存在，且不会被频繁移除或替换
- 用 e.target 而非 e.currentTarget 来识别真实触发元素
- 注意事件代理层级过深可能影响可维护性，通常选直接父容器最合理
