事件委托可将o(n)绑定优化为o(1)，通过在静态父容器上绑定一次监听，利用事件冒泡和e.target.closest()动态识别目标，避免重复绑定、内存浪费及新节点失效问题，但需避开不冒泡事件（如blur、focus）并确保父容器未被replacewith()替换。
为什么给每个子元素绑 addEventListener 会卡顿
浏览器每调用一次 addEventListener，就要分配内存、注册监听器、维护事件队列。100 个按钮，就是 100 次独立注册——不仅初始化慢，在低端安卓机上首次点击延迟可能超 200ms；更麻烦的是，后续动态插入的新按钮根本不会响应，除非你手动补绑，极易漏掉或重复绑定。
用事件委托把 O(n) 绑定压成 O(1)
只在稳定父容器（比如 <ul id="list"></ul>）上绑一次监听，靠事件冒泡和 e.target.closest('.btn') 动态识别目标。这能彻底避免重复监听器堆积，新插入的子节点也天然生效。
- 父容器必须是静态存在的，不能选
document或body——冒泡路径太长，closest()反而变慢 - 别用
innerHTML = ''或replaceChildren()整块替换父容器，否则监听器虽在，但 DOM 引用断开，行为不可靠 -
click和touchstart不要双绑：优先监听touchstart并传{ passive: false }，PC 环境 fallback 到click+ 简单防抖
哪些事件不能委托？
不是所有事件都支持冒泡，委托前得确认类型：
- 能委托：
click、input、keydown、change（注意：change在某些浏览器中冒泡行为不一致，建议测试） - 不能委托：
blur、focus、load、scroll——它们不冒泡，绑在父级无效 - 想捕获阶段触发？加第三个参数
true：el.addEventListener('click', fn, true)
动态内容更新后还要重绑监听器吗
不用。只要父容器没被 replaceWith() 或 outerHTML = 替换掉，委托监听器就一直有效——这是它最省心的地方。
但要注意：innerHTML += 虽然会重建子树，但父容器本身还在，监听器照常工作；真正翻车的是用 el.replaceWith(newEl)，原监听器彻底丢失，必须重新绑定。
委托不是银弹，关键在选对父容器、写对匹配逻辑、避开不冒泡事件——这些细节漏掉一个，性能优化就变成假优化。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
