事件委托在组件化中应选稳定存在、生命周期与组件对齐的父容器，如组件根元素或直接子容器（如ul.item-list），避免挂载到document/body或易被整块替换的节点；必须用e.target.closest()安全匹配目标，统一处理touchstart/click并防重，仅对冒泡事件（Bubbles: Yes）有效。
事件委托在组件化中怎么选父容器
组件化开发里，委托的父容器不能是 document 或 body，也不能是会被整块替换的包装器（比如用 innerHTML = newHtml 重写的 div）。必须选组件内部**稳定存在、生命周期与组件对齐**的容器节点。
常见错误是把监听器挂到 document 上图省事，结果冒泡路径长、判断慢，还容易和其它组件逻辑冲突。正确做法是：在组件根元素（如 div class="card"）或其直接子容器（如 ul class="item-list"）上绑定。
- Vue/React 组件中，可用
ref或useRef拿到真实 DOM 节点后调用addEventListener - 如果组件支持 slot 插入内容，确保委托容器能包裹所有可能插入的子节点
- 避免父容器被
replaceWith()或outerHTML =替换——这种操作会彻底丢失监听器
如何用 event.target.closest() 安全匹配目标元素
别用 e.target.classList.contains('btn') 或 e.target.tagName === 'BUTTON'，这些在嵌套结构里极易失效（比如按钮里有图标或文字节点）。
e.target.closest() 是唯一可靠方式，它从点击节点向上找第一个匹配选择器的祖先，天然穿透嵌套。
立即学习“前端免费学习笔记（深入）”；
- 写法示例：
e.target.closest('button[data-action="delete"]') - 支持复合选择器，如
'.item > .control .save-btn'，但注意性能——太深的选择器会拖慢匹配 - 返回
null表示没匹配到，必须显式判断，否则后续读取.dataset会报Cannot read property 'dataset' of null
click 和 touchstart 委托怎么共存不重复触发
移动端要消除 300ms 点击延迟，必须监听 touchstart；但桌面端没有 TouchEvent，得 fallback 到 click。双绑又会导致同一操作触发两次。
核心解法是：统一入口 + 防重机制，而不是靠运气赌用户只用一种设备。
- 监听
touchstart时必须传{ passive: false }，否则e.preventDefault()无效，滚动会卡顿 - 用一个标志位（如
let isTouchHandled = false）+setTimeout清除，让click处理器在 touch 后 300ms 内跳过 - 优先用
e.target.closest()查目标，不要在两个 handler 里重复写匹配逻辑
哪些事件根本不能委托，必须直绑
不是所有事件都能靠冒泡委托。查 MDN 时盯紧 “Bubbles” 字段——值为 Yes 才能委托。
常见陷阱：
-
focus、blur、load：不冒泡，委托无效，必须直接绑定到目标元素 -
mouseenter、mouseleave：名字像，但实际不冒泡，别误用 -
input、change：可以委托，但触发时机不同——input实时触发，change在失焦后才触发 - 表单提交类事件（如
submit）可委托，但注意：若子表单被event.stopPropagation()截断，委托就收不到
委托本身不难，难的是在组件生命周期里守住父容器的稳定性、匹配逻辑的鲁棒性，以及跨设备事件行为的一致性。这三个点漏掉任何一个，都会在灰度发布后突然冒出“点不动”“点两下”“手机没反应”这类问题。
