事件委托通过父元素监听冒泡事件来统一处理子元素交互，减少监听器数量、适配动态内容、节省内存；需注意事件冒泡限制、父容器稳定性及精准目标过滤。
事件委托利用事件冒泡机制，把子元素的事件监听逻辑统一交给父元素处理，避免为大量子元素重复绑定事件，从而减少内存占用、提升页面性能。
事件委托的核心原理
DOM事件会从目标元素向上逐层冒泡到根节点。只要父元素监听了某个事件（如 click），当子元素触发该事件时，父元素也能捕获并响应——前提是子元素没有调用 event.stopPropagation() 阻断冒泡。
关键在于通过 event.target 判断真正被点击的是哪个子元素，再执行对应逻辑。
基础实现方式
以动态增删列表项为例：
立即学习“Java免费学习笔记（深入）”；
- 不推荐：每次新增
都调用li.addEventListener('click', handler) - 推荐：只给
代码示例：
document.querySelector('ul').addEventListener('click', function(e) {
if (e.target.tagName === 'LI') {
console.log('点击了列表项：', e.target.textContent);
}
});
为什么能提升性能？
主要体现在三方面：
- 减少监听器数量：100 个按钮只需 1 个监听器，而非 100 个，降低 JS 引擎维护开销
- 动态内容友好：新增或删除子元素无需重新绑定/解绑事件，避免频繁 DOM 操作和事件管理逻辑
- 节省内存：每个事件监听器都携带闭包和作用域链，大量监听器会显著增加内存压力
实际使用注意事项
事件委托不是万能的，需注意：
- 并非所有事件都支持冒泡（如 focus、blur、mouseenter、mouseleave），可改用 focusin/focusout 替代
- 确保父容器稳定存在，且层级不宜过深（避免冒泡路径太长影响响应及时性）
- 过滤条件要准确，例如用 e.target.matches('.btn-delete') 比单纯判断 tagName 更可靠
