17370845950

事件委托是通过在父元素绑定事件监听器，利用事件冒泡机制捕获子元素触发的事件，并用event.target识别目标元素；它节省内存、减少DOM操作、支持动态内容，适用于列表、表格、菜单等高频增删场景。

事件委托是把子元素的事件监听任务，交给它们共同的父元素来统一处理。它不靠给每个子元素单独绑事件，而是利用事件冒泡机制，让点击、输入等操作从子元素“冒”到父元素，再由父元素判断是谁触发的、该做什么。

事件委托是怎么工作的

核心就三点：

• 在父元素上绑定一个事件监听器（比如 click）
• 事件触发后，浏览器自动把事件从子元素往上传，直到父元素
• 在父元素的回调函数里，用 event.target 找出真正被点中的那个子元素，再执行对应逻辑

为什么能提升性能

关键在于“少绑监听器”，直接减少三类开销：

• 内存更省：每个事件监听器都是一个函数对象，100个按钮各绑一次，就是100个对象；用委托，只要1个
• DOM访问更少：不用反复调用 addEventListener 去遍历所有子节点，降低重排重绘压力
• 动态更新更稳：新插入的子元素不用额外绑定——只要它在父容器内，点击照样能被父元素捕获

适合用事件委托的典型场景

不是所有地方都得用，但这些情况特别合适：

• 列表项很多（比如商品列表、聊天消息流）
• 表格每行都有操作按钮（编辑、删除、复制）
• 菜单、标签页、选项卡这类结构频繁增删子项
• 内容由 AJAX 或模板引擎动态生成

基本上就这些。它不复杂但容易忽略，尤其在写大量重复绑定时，换成委托往往一行代码就能省掉几十行循环。