事件 委托 通过将监听器绑定在父元素上利用冒泡机制处理子元素事件，减少 内存占用 并支持动态内容；核心是用 Event.target 配合 matches() 或 closest()识别目标元素，需注意 事件冒泡 限制与 性能优化。
事件委托利用 事件冒泡 机制，把事件监听器绑定在父元素上，而不是每个子元素单独绑定。这样既减少 内存占用，又让动态添加的子元素自动响应事件，性能和可维护性都更好。
事件委托的核心原理
dom事件会从触发目标逐级向上冒泡到根节点。只要父元素监听了事件，就能捕获子元素冒泡上来的事件，并通过 event.target 准确识别真正被点击的是哪个子元素。
比如一个列表有 100 个 <li>，不委托就得绑定 100 次 click；用委托只需绑定 1 次到 <ul></ul>，再判断 event.target 是否为 <li> 即可。
基础实现方式
用 addEventListener 绑定在父容器，再用条件判断筛选目标元素：
立即学习“Java 免费学习笔记（深入）”；
- <li> 获取事件 对象 的 event.target，它是实际触发事件的最深子元素
<li> 用 matches() 或 closest() 判断它是否符合目标 选择器（如 "li"、".btn-delete"）
<li> 符合条件才执行业务逻辑，避免误触发
示例：
document.getElementById('list').addEventListener('click', function(e) {if (e.target.matches('li')) {console.log('点击了列表项：', e.target.textContent); } });
处理动态内容与复杂结构
新增的子元素无需重新绑定事件——只要它们结构符合委托规则，就能立即响应。
对嵌套较深或存在中间包装元素的情况，推荐用 closest() 向上查找最近匹配的祖先元素：
- <li>
e.target.closest('.item') 能命中 .item 本身，也能命中它内部任意子节点（如按钮、文字）
<li> 比反复判断 parentnode 更简洁可靠
<li> 适合按钮在卡片内、图标在标签里等常见布局
注意事项与优化点
事件委托不是万能的，需注意几点：
- <li> 不是所有事件都支持冒泡（如
focus、blur），可用 focusin/focusout 替代
<li> 避免在顶层 document 或 body 盲目委托，应尽量靠近目标元素，减少不必要的冒泡路径
<li> 高频事件（如 mousemove）慎用委托，可能增加判断开销；必要时加节流
<li> 确保父容器始终存在且不会被频繁销毁重建，否则监听器会失效
