事件委托需把握“事件冒泡+事件源判断+动态匹配”三要素，规避误处理节点、重复绑定、stopPropagation截断、兼容性及性能问题，方能稳定可靠。
事件委托本身不难，但实际开发中容易因细节疏忽导致失效、重复绑定、内存泄漏或逻辑错乱。核心是理解“事件冒泡 + 事件源判断 + 动态匹配”三要素，再结合具体场景规避典型陷阱。
避免事件源判断不严谨
委托监听的是父元素，但真正触发操作的是子元素。若直接用 e.target 而不做类型/状态校验，可能误处理文本节点、注释节点、disabled 元素或被遮挡的伪元素。
- 始终用 e.target.closest(selector) 替代 e.target.matches(selector)，前者能向上查找祖先，兼容动态插入的子项；后者只判断目标自身，易漏掉嵌套结构（比如按钮内有图标或文字 span）
- 检查元素是否有效：if (!el || el.disabled || el.closest('[data-disabled]')) return;
- 避免依赖 innerText/textContent 判断——它们受样式影响（如 display: none），应以 DOM 结构和属性为准
防止多次绑定造成重复响应
在单页应用或组件反复挂载/卸载时，若未清理旧委托，同一事件会触发多次回调（尤其在 Vue/React 的 useEffect 或 mounted 中未配对 removeEventListener）。
- 委托函数必须是同一个引用：不要在监听器里写匿名函数，改用具名函数或 useCapture 配合 Map 缓存
- 卸载时务必调用 element.removeEventListener('click', handler)；若用 addEventListener 的第三个参数是对象（如 { once: true }），需确保该配置与绑定时一致
- 推荐封装委托工具函数，内部自动管理绑定/解绑生命周期，例如：delegate(parent, 'button', 'click', handler, options)
注意事件冒泡被中途阻止
子元素或中间祖先调用了 e.stopPropagation()，会导致委托失效——因为事件到不了委托绑定的父级。
- 优先使用 e.stopImmediatePropagation() 的场景要格外小心，它会阻止同一事件阶段的其他监听器，包括委托回调
- 若无法控制子元素行为（如第三方 UI 组件），可考虑在 document 级别委托（慎用），或改用捕获阶段：parent.addEventListener('click', handler, true)
- 调试时可用浏览器开发者工具的 Event Listeners 面板查看事件流路径，确认是否被截断
兼容性与性能细节别忽略
看似边缘的问题，上线后可能引发兼容报错或卡顿。
- closest() 在 IE 不支持：需 polyfill 或降级为手动遍历 parentNode
- 高频事件（如 mousemove、scroll）委托需防抖/节流，否则快速移动可能触发数百次判断
- 避免在委托回调中频繁查询 DOM（如反复 document.querySelector），应缓存选择器结果或用 dataset 标识元素
- 移动端注意 click 300ms 延迟，委托 tap 类事件时建议监听 touchstart 并自行模拟，或启用 fastclick
事件委托不是“一劳永逸”的银弹，而是需要结合结构、交互意图和运行环境做权衡的技术手段。写对不难，写稳才见功力。
