事件委托通过将大量元素的事件监听收口到父容器，仅注册一个监听器，使绑定开销从O(n)降至O(1)，显著降低HTML5页面首次交互延迟。
事件委托为什么能降低 HTML5 页面交互延迟
直接给大量元素绑定 click、touchstart 等事件，会在 DOM 渲染后瞬间触发大量监听器注册，尤其在列表项超过 50 个时，不仅内存占用高，还会阻塞主线程，造成首次交互明显卡顿。事件委托把监听逻辑收口到父容器，只注册一个监听器，靠 event.target 动态判断触发源，从 O(n) 降为 O(1) 的绑定开销。
但要注意：不是所有场景都适合——如果父容器是 document 或 body，事件冒泡路径过长，反而增加判断延迟；应选离目标元素最近的稳定父级（比如 innerHTML 或 replaceChildren() 替换，否则监听器会丢失。
如何用 addEventListener 正确实现委托（含 touch 兼容）
HTML5 移动端页面常同时监听 click 和 touchstart，但直接双绑会导致同一操作触发两次。正确做法是统一用 touchstart + preventDefault() 抑制 300ms 延迟，并退化处理无触控设备：
- 优先监听
touchstart，并在回调中调用event.preventDefault()阻止默认行为（如滚动）和 click 延迟 - 对不支持
TouchEvent的环境（如桌面 Chrome），fallback 到click，但需加防抖（setTimeout+ 标志位）避免重复响应 - 委托目标用
event.target.closest('.item-btn')而非遍历父节点，兼容性好且语义清晰
const list = document.querySelector('.list');
list.addEventListener('touchstart', handleEvent, { passive: false });
list.addEventListener('click', handleEvent);
function handleEvent(e) {
if (e.type === 'touchstart') e.preventDefault();
const btn = e.target.closest('.item-btn');
if (!btn) return;
// 实际业务逻辑
console.log('clicked:', btn.dataset.id);
}
passive: false 必须显式声明才能阻止滚动延迟
现代浏览器对 touchstart 监听器默认启用 passive: true，意味着你无法在事件中调用 preventDefault() —— 这会导致控制台报错 Unable to preventDefault inside passive event listener，进而让 300ms 延迟照常发生。
立即学习“前端免费学习笔记（深入）”；
解决方法只有两个：
① 在 addEventListener 中明确传入 { passive: false }；
② 确保该监听器确实需要阻止默认行为（比如按钮点击不应触发页面滚动）。
注意：passive: false 会轻微影响滚动性能，所以只对真正需要拦截的容器启用，不要全局设在 document 上。
委托失效的三个典型原因及修复
事件委托看似简单，实际线上最容易因以下三点突然失效：
- 动态插入的新元素未触发重绑：用委托本就无需重绑，但如果父容器被整个
outerHTML替换或remove()后重建，监听器就丢了——应确保父容器生命周期稳定，或改用MutationObserver捕获容器重建并重挂监听 -
stopPropagation()在中间节点被调用：某个子元素（如弹窗遮罩层）调用了e.stopPropagation()，导致事件无法冒泡到委托容器——排查时可在父容器监听器里打日志，确认是否收到事件 - 目标元素
pointer-events: none或disabled属性：这类元素不触发任何指针事件，委托自然收不到 —— 改用aria-disabled+ CSS 控制视觉状态，保持事件可捕获
委托本身不解决渲染卡顿，它只优化事件注册和分发路径。如果点击后业务逻辑执行慢（比如同步 DOM 操作 + 大量计算），仍需用 requestIdleCallback 或 Web Worker 拆解任务。
