事件委托性能优劣取决于父节点选择与判断逻辑：应绑定在离目标最近且稳定的父容器上，避免document/body；须用e.target.closest()精准匹配，防范dom重绘导致监听丢失及shadowroot阻断等问题。
事件委托不是“加了就快”，关键在父节点选得对不对、判断逻辑写得稳不稳——选错父容器或滥用 e.target 直接比不委托还慢。
为什么 document 上绑 click 会变卡
冒泡路径太长，每次点击都要从目标元素一路查到 document，再执行 e.target.closest('.btn')，浏览器要遍历整个 DOM 树。低端安卓机上这个查找耗时可能超过 15ms，连续点击就明显卡顿。
- ✅ 正确做法：绑定到离目标最近的、**稳定存在且不会被整块替换**的父容器，比如
document.querySelector('.list') - ❌ 避免：
document.addEventListener('click', ...)或document.body.addEventListener('click', ...) - ⚠️ 注意：如果父容器本身用
innerHTML = ''或replaceChildren()清空重绘，监听器就断了，事件直接失效
如何安全识别真实触发元素
别无脑用 e.target，它可能是子文本节点、图标 <svg></svg> 或内联 <span></span>，不是你想要的按钮本身。
- ✅ 推荐用
e.target.closest('.action-btn')—— 向上找最近匹配的祖先，兼容嵌套结构 - ❌ 少用
e.target.classList.contains('action-btn')，因为e.target可能是按钮里的<i></i>标签，没 class - ⚠️ 如果目标是自定义组件（如 Web Component），需确认其 shadowRoot 是否阻断冒泡；默认是透出的，但设了
shadowRoot.mode = 'closed'就收不到
touch 与 click 兼容问题怎么绕开
移动端 touchstart 比 click 触发早 ~300ms，但直接绑 touchstart 容易误触；用 click 又有延迟。折中方案是委托 + passive 控制。
- ✅ 给滚动容器（如
.scroll-list）绑touchstart时加{ passive: false }，才能调e.preventDefault()拦截滚动 - ✅ 普通点击操作仍用
click委托，但避免在同一个父容器上同时监听click和touchstart，否则 iOS 可能触发两次 - ⚠️ 不要在
document或body上设{ passive: false }，会全局禁用滚动优化，页面直接变卡
动态插入元素后事件不生效？检查三件事
事件委托本该自动生效，不生效大概率是底层链路断了。
- ✅ 确认新元素确实 append 到你委托的那个父容器下，而不是插到别的 DOM 节点里
- ✅ 检查是否用了
outerHTML替换整个父容器 —— 这会销毁原节点及绑定的监听器 - ✅ 如果用
template.innerHTML插入，确保没漏掉content.cloneNode(true)，否则 script 和 event listener 不会复制过去
最常被忽略的是父容器的“稳定性”：它得一直活着、不被整段重写、不跨 shadow boundary、不被 Vue/React 的 key 机制意外卸载——这些细节一错，委托就形同虚设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
