事件委托能解决卡顿，因其将o(n)事件绑定降为o(1)，仅在稳定父容器上注册单个监听器，依托事件冒泡与e.target动态识别目标；但需避免父容器为document/body、防止被innerhtml整块替换，并正确处理touch/click兼容及passive策略。
直接给每个子元素绑事件，页面一卡一卡的；用事件委托，一个监听器管全场，交互延迟立马下来。
为什么事件委托能解决大量元素绑定卡顿
浏览器在 DOM 渲染完后，如果要给 100 个 .item 元素分别调用 addEventListener('click', ...)，就得执行 100 次注册操作——这不仅是内存开销，更会阻塞主线程，尤其在低端安卓机上，首次点击可能延迟 200ms+。事件委托只在父容器（比如 <ul class="list"></ul>）上绑一次，靠事件冒泡 + e.target 判断源头，把 O(n) 绑定降为 O(1)。
但要注意：
- 父容器不能是
document或body—— 冒泡路径太长，判断e.target.closest('.btn')反而变慢 - 父容器不能被
innerHTML = ''或replaceChildren()整段替换，否则监听器就丢了 - 如果父容器本身需要滚动，又想拦截点击，得小心
passive: false的副作用
怎么写一个兼容 touch 和 click 的委托监听器
移动端既要响应 touchstart（避免 300ms 延迟），又要 fallback 到桌面端的 click，但双绑会导致同一操作触发两次。正确做法是：
- 优先监听
touchstart，且必须显式传{ passive: false }，否则e.preventDefault()会报错Unable to preventDefault inside passive event listener - 在回调里统一用
e.target.closest('.action-btn')找目标，别手写while (el && !el.matches(...)) el = el.parentNode - 对不支持
TouchEvent的环境（如 PC Chrome），再监听一次click，并加简单防抖（setTimeout+ 标志位）防止重复触发
示例：
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('.action-btn');
if (!btn) return;
console.log('fired on:', btn.dataset.id);
}
动态添加元素后事件还生效吗
只要父容器没被销毁重绘，新插入的子元素点一下照样触发——因为根本没给它单独绑过事件，所有点击都由父容器统一收口处理。
常见翻车点：
- 用
element.innerHTML += '<li>new</li>'：会重建整个子树，老监听器还在，但新节点的事件行为完全正常 - 用
element.replaceChildren(...)：整个子树被清空重建，监听器依然存在，无需重绑 - 但如果父容器自己也被
innerHTML替换了（比如重绘整个.list），那监听器就真没了，得重新addEventListener
最易被忽略的是 passive 策略和父容器稳定性——不是所有“看起来能用委托”的地方都真正适合委托，关键看冒泡路径是否可控、父节点是否会被整块替换。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
