事件委托必须挂载在已存在且生命周期稳定的父容器上，否则监听器无效；需确保父容器在脚本执行前已渲染或动态创建后才绑定监听；禁用快照式逐个绑定；避免使用body/document作委托根节点；注意pointer-events等CSS属性对冒泡的影响。
事件委托必须挂载在**已存在且生命周期稳定的父容器**上，否则监听器形同虚设——不是事件不冒泡，而是根本没地方“守”。
监听器必须绑定在 DOM 中已渲染的父节点上
如果脚本执行时 document.querySelector('#list') 返回 null，说明该容器还没挂载，addEventListener 会静默失败，后续所有动态插入的子节点都收不到响应。
- 确保 HTML 中父容器（如
- 若用 JS 动态创建父容器，必须等它
appendChild到文档后，再绑定监听器； - 避免把监听逻辑放在
DOMContentLoaded之前、或未加等待就直接查元素； - 不要依赖“稍后总会渲染出来”的假设——DOM 查找是同步且即时的。
禁止用静态 NodeList 或数组缓存子节点再逐个绑定
写 Array.from(document.querySelectorAll('.item')).forEach(el => el.addEventListener(...)) 看似直观，但这个数组不会随 DOM 变化更新，新插入的 .item 永远不在其中，也不会被监听。
- 这种写法本质是“快照式绑定”，只对当前存在的节点有效；
- 每次新增节点都要重新查一遍、再遍历绑定，性能差且易漏；
- 内存中堆积大量监听器，容易引发泄漏；
- 真正需要的是“一次注册，永久生效”的委托模式。
父容器不能是 document.body 或 document.documentElement
虽然它们永远存在，但把委托挂在这两级上会放大误判风险：任何点击都会上冒至此，event.target.closest() 必须做更重的条件过滤，且容易被第三方脚本、广告组件、浏览器插件触发干扰。
- 优先选择语义明确、作用域收敛的容器，如
#task-list、.comment-thread； - 容器层级不宜过深（影响事件路径长度），也不宜过浅（失去隔离性）；
- 避免用
body做通用委托入口——它不是“万能兜底”，而是“高危全局监听点”； - 如果真要用
document，务必加强event.target排除逻辑（例如跳过script、iframe、style等非交互节点）。
最常被忽略的一点：父容器的 CSS 层级和 pointer-events 设置会直接截断冒泡路径——哪怕 DOM 结构完好、监听器也挂上了，如果父容器被设为 pointer-events: none，事件连第一步都传不到它身上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
