事件委托本质是利用事件冒泡，将监听器绑定在稳定父元素上，通过event.target.closest()安全匹配目标元素，避免重复绑定与内存泄漏，不适用于行内事件或冒泡被阻断等场景。
事件委托的本质是利用事件冒泡
事件委托不是某种特殊语法，而是把事件监听器绑定在父元素上，靠浏览器原生的事件冒泡机制捕获子元素触发的事件。关键在于：event.target 指向真正被点击的元素，而 event.currentTarget 指向监听器绑定的父元素。
常见错误是直接在子元素上反复绑定 addEventListener，尤其在动态增删列表项时，容易漏绑、重复绑或内存泄漏。
- 必须确保父容器存在且稳定（比如用
document.getElementById('list')而非临时生成的div） - 避免在
body或document上无差别监听——性能差、语义弱、易冲突 - 注意
event.target可能是子元素的后代（比如按钮里的span），要用closest()安全匹配
用 element.addEventListener + event.target.closest 实现安全委托
现代写法推荐用 closest() 判断目标是否匹配选择器，比手动遍历父级更简洁可靠。
const list = document.getElementById('task-list');
list.addEventListener('click', function (e) {
const item = e.target.closest('.task-item');
if (!item) return;
const id = item.dataset.id;
console.log('操作任务:', id);
});
这个模式适用于所有支持 closest() 的浏览器（IE11+，现代环境完全没问题）。如果需兼容老 IE，可用 matches() + 循环向上查找，但没必要为旧版牺牲可读性。
立即学习“Java免费学习笔记（深入）”；
-
closest('.task-item')自动处理嵌套结构，哪怕点中了内部的span或i图标也能命中 - 不依赖 class 名硬编码到事件处理器里，便于后续改名或复用
- 无需在每次添加新
.task-item时重新绑定事件
为什么不用 onclick 属性或 onxxx 行内事件
行内事件（如 <button onclick="handleClick(id)"></button>）会强制把逻辑耦合进 HTML，破坏关注点分离，且无法利用事件委托的动态优势。
- 字符串拼接易出错，
id含单/双引号时直接报错 - 无法访问闭包变量或模块作用域内的函数
- 调试困难：Chrome DevTools 不显示行内事件的调用栈源头
- 每个元素都占一份函数引用，内存开销随 DOM 增长线性上升
委托失效的三个典型场景
即使代码写对了，也可能因 DOM 状态或事件类型不匹配而“看起来没反应”。
- 监听了
click，但用户实际触发的是mousedown或touchstart—— 移动端尤其要注意 - 目标元素设置了
pointer-events: none或event.stopPropagation()，阻断了冒泡路径 - 父容器高度为 0 或未设置
display: block，导致事件根本没机会落到它身上（检查 computed styles 中的height和overflow）
最常被忽略的是：委托只对「已存在于 DOM 中的父容器」有效。如果整个列表是后来用 innerHTML 插入的，要确保委托绑定发生在插入之后，而不是脚本顶部执行时就去查 getElementById 却拿到 null。
