最高效可控的组件级事件委托是绑定在最近稳定父容器并用e.target.closest()判断目标；避免document/body监听以防冒泡过长和干扰；父容器不变时动态插入元素自动生效；touchstart与click需防重复触发；focus/blur/change等不冒泡事件不可委托。
直接在父容器上用 addEventListener 绑定事件，配合 e.target.closest() 判断目标，是当前最高效、最可控的组件级事件委托实现方式——不用框架、不依赖 jQuery，原生即可落地。
为什么不能把监听器绑在 document 或 body
冒泡路径太长，每次点击都要从目标元素一路查到顶层，再逐层判断是否匹配，e.target.closest('.btn') 的执行开销会明显上升；尤其在复杂 DOM 树或低端设备上，卡顿可感知。更关键的是，document 上容易被其他脚本干扰（比如第三方 SDK 意外调用 stopPropagation），导致委托失效。
实操建议：
- 选最近的、稳定存在的父容器，比如
<div class="card-list"> 或 <code><ul id="message-thread"></ul> - 确保该容器在脚本执行时已挂载 DOM，否则
addEventListener静默失败 - 避免用
innerHTML = newHTML全量重写该容器——监听器虽保留，但内部引用可能断连；改用replaceChildren()或append()更安全 - 统一用
e.target.closest('button[data-action="delete"]')——能穿透任意嵌套层级，返回最近的符合条件祖先 - 匹配选择器尽量具体：用
data-action属性比纯 class 更语义清晰，也避免样式类名变更引发逻辑断裂 - 加空值防护：
if (!btn) return;，防止点到空白区域或非目标文本节点时报错 -
el.innerHTML += '<li>new</li>'：看似追加，实则全量重建子树，旧节点销毁，但委托监听器仍在，行为正常 -
el.replaceWith(newEl)：父容器被彻底换掉，监听器丢失，必须重新addEventListener - 用
cloneNode(true)复制带事件的节点：克隆体不继承原节点监听器，得靠委托兜底——这也是委托优于直接绑定的关键优势 - 优先监听
touchstart，并显式传{ passive: false }，否则e.preventDefault()会报错 - 在 handler 里统一用
e.target.closest()查目标，不区分事件类型 - 对 PC 环境 fallback 监听
click时，加简单节流：设个let pending = false标志位，touchstart触发后 300ms 内忽略click
e.target.closest() 比 e.target.matches() 和 class 检查更可靠
当按钮里嵌了图标、文字或 span，e.target 往往不是 button 本身，而是其子节点。用 e.target.classList.contains('delete') 或 e.target.tagName === 'BUTTON' 会漏判；e.target.matches('button.delete') 虽好，但不支持向上查找父级匹配项。
实操建议：
动态插入元素后事件还生效吗？关键看父容器是否被替换
只要父容器节点没被 replaceWith()、outerHTML = 或整个移除重建，新插入的子元素点击就自动触发委托逻辑——根本不需要重绑、也不需要手动遍历补监听。
但要注意这些翻车点：
移动端 touchstart + click 双监听要防重复触发
直接同时监听 touchstart 和 click，在部分安卓 WebView 或 iOS Safari 中会导致同一操作触发两次回调。这不是 bug，而是事件机制使然。
实操建议：
真正容易被忽略的，是父容器生命周期和事件类型兼容性——focus、blur、change 不冒泡，无法委托；而 input、keydown、click 可以。别试图用委托处理所有事件，该单独绑的还得单独绑。
