事件委托是什么？怎么优化性能？

事件委托是一种借助DOM事件冒泡机制、将多个子元素的事件监听逻辑集中交由父元素统一处理的高效技巧，它不仅能大幅减少重复绑定带来的性能开销和内存占用，还能让动态插入的新元素自动具备事件响应能力，无需手动重绑；通过e.target或closest()精准识别触发源，既提升了代码可维护性，又增强了对列表类、频繁增删场景（如聊天记录、待办事项）的适应性，是前端优化中兼顾性能与健壮性的关键实践。

事件委托是利用事件冒泡机制，把子元素的事件监听逻辑统一交给父元素处理的一种技巧。它不只为减少重复绑定，更关键的是让动态添加的元素自动拥有事件响应能力，同时降低内存占用。

事件委托的核心原理

DOM事件会从目标元素逐级向上冒泡到根节点。只要父元素监听了某个事件，即使点击的是它的任意后代元素，也能在父元素的事件处理器中捕获并判断具体来源。

关键操作是使用 event.target 获取真正被点击的元素，再通过属性（如 class、data-*）或 DOM 方法（如 closest()）识别是否属于预期目标。

比逐个绑定更省资源

• 原来要给 100 个按钮分别 addEventListener → 现在只给它们的共同父容器绑 1 次
• 避免大量闭包和回调函数驻留内存，尤其适合列表项频繁增删的场景（如聊天记录、商品列表）
• 无需为新插入的元素重新绑定事件——只要结构符合委托规则，立即生效

一个实用的例子

假设有个待办列表：

用事件委托代替循环绑定：

注意边界情况

• 确保父元素稳定存在，不要选 body 或 document 做委托（除非真有必要），优先选语义明确的直接容器
• 避免委托太深的嵌套，否则 event.target 可能是子子元素（比如 span 里有图标），建议用 e.target.closest('.item') 精准匹配
• 某些事件（如 focus、blur）不冒泡，不能委托；input 的 change 也不适合委托，推荐用 input 或 keyup 替代

基本上就这些。用对了，代码更轻，维护也更稳。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《事件委托是什么？怎么优化性能？》文章吧，也可关注golang学习网公众号了解相关技术文章。