17370845950

事件委托是利用事件冒泡将子元素事件处理统一交由父元素监听，通过event.target识别目标元素；它减少监听器数量、避免动态元素重复绑定，提升性能；但mouseenter/mouseleave不冒泡、深层嵌套或父容器逻辑复杂时不适用。

事件委托是什么？

事件委托是利用事件冒泡机制，把子元素的事件监听逻辑移到父元素上统一处理。不是给每个 li 单独绑 click，而是给它的父级 ul 绑一个 click，再通过 event.target 判断点击的是哪个子项。

为什么它能提升性能？

关键在「减少监听器数量」和「避免重复绑定」：

• 动态添加的元素（比如用 appendChild 插入新 li）无需重新绑定事件，父级监听器天然生效
• 100 个按钮各绑一次 click，就是 100 个函数实例；用委托只创建 1 个监听器，内存占用更低
• DOM 初始化阶段绑定开销小，尤其适合列表项频繁增删的场景（如聊天消息流、无限滚动列表）

event.target 和 event.currentTarget 怎么区分？

这是委托里最容易写错的地方：

• event.target 是你真正点击的那个元素（比如某个 span 或 button）
• event.currentTarget 是当前绑定事件的那个父元素（比如 ul），始终等于监听器所在的 DOM 节点
• 判断是否点中目标子元素时，别直接用 event.target === xxx，要用 event.target.matches('.item-btn') 或 event.target.classList.contains('delete')

const list = document.getElementById('my-list');
list.addEventListener('click', function (e) {
  if (e.target.matches('button.delete')) {
    const item = e.target.closest('li');
    item.remove();
  }
});

哪些情况不适合用事件委托？

不是所有点击都要往上提：

• 需要精确捕获 mouseenter/mouseleave 的场景——这两个事件不冒泡，委托无效
• 子元素层级太深或结构混乱，e.target 可能是文本节点或嵌套的图标，匹配逻辑容易出错
• 父容器本身有复杂交互（比如可拖拽、可折叠），事件逻辑耦合高，委托会让职责不清晰
• 极少数对首屏响应时间极度敏感的按钮（如播放键），直接绑定省去冒泡路径判断，延迟更可控

实际项目里，委托的价值不在“炫技”，而在降低维护成本：DOM 结构变、数据量变、渲染方式变，只要父容器不变，委托逻辑往往一动不动。但别为了委托而委托——先看清楚 target 是什么，再决定监听挂在哪。