事件委托是利用事件冒泡将子元素事件处理统一交由父元素监听，通过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();
}
});
哪些情况不适合用事件委托？
不是所有点击都要往上提：
立即学习“Java免费学习笔记（深入）”；
- 需要精确捕获
mouseenter/mouseleave的场景——这两个事件不冒泡，委托无效 - 子元素层级太深或结构混乱，
e.target可能是文本节点或嵌套的图标，匹配逻辑容易出错 - 父容器本身有复杂交互（比如可拖拽、可折叠），事件逻辑耦合高，委托会让职责不清晰
- 极少数对首屏响应时间极度敏感的按钮（如播放键），直接绑定省去冒泡路径判断，延迟更可控
target 是什么，再决定监听挂在哪。 
