事件委托是实现高性能监听的关键手段，需减少监听器数量、规避重复绑定、适配动态结构；应选语义明确的父容器而非document/body，用matches()和closest()精准识别目标，配合数据驱动避免运行时查表。
事件委托本身不是“高性能”的代名词，而是实现高性能监听的关键手段之一——前提是用对地方、写得合理。它不靠魔法提速，靠的是减少监听器数量、规避重复绑定、适配动态结构这三点本质逻辑。
选对委托容器，避免冒泡路径过长
监听节点越靠近目标元素，冒泡路径越短，响应越快。不要直接挂到 document 或 body 上，尤其当页面结构深、交互密集时，会增加不必要的遍历开销。
- 优先用业务语义明确的父容器，比如
<ul class="task-list"></ul>、<div data-role="comment-section"> <li>避免跨组件或跨区域委托，防止一个监听器处理大量无关事件，增加判断负担</li> <li>如果列表分组明显（如按日期/状态折叠），可为每组设独立委托节点，比全局一个更轻量</li> <h3>精准识别目标，少做无效判断</h3> <p>委托的核心在于快速定位真正触发动作的元素。频繁调用 <code>querySelectorAll或层层遍历parentNode，会把委托带来的性能优势抵消掉。- 用
e.target.matches('.delete-btn')直接判断是否命中操作按钮，比检查 class 名字符串更安全可靠 - 用
e.target.closest('[data-id]')向上找最近的业务单元，一步拿到数据上下文，不用再查 DOM 树 - 提前过滤非目标节点：点击文字时
e.target可能是文本节点，matches()和closest()自动跳过这类节点，无需额外nodeType判断
配合数据驱动，避免运行时查表
委托解决的是“谁被点了”，但真正影响性能的是“点完之后怎么查数据”。别在回调里反复搜索或遍历数组。
- 渲染时就把关键标识写进 DOM：
<li data-id="123" data-status="pending">...</li> - 点击时直接读
item.dataset.id，而不是靠索引、文本内容或位置去映射数据 - 高频操作（如 hover、drag）加节流，或用
{ once: true }避免重复触发；滚动中慎用委托，可改用 IntersectionObserver 替代
绕开常见陷阱，保持委托稳定生效
不是所有事件都能委托，也不是所有写法都真正发挥了委托价值。几个典型雷区要主动避开：
-
focus/blur不冒泡，得用focusin/focusout替代；mouseenter/mouseleave也不冒泡，必须直绑 - 子元素里调用了
e.stopPropagation()，会切断冒泡链——此时委托失效，应评估是否真需拦截，或改用e.stopImmediatePropagation() - 动态模板中 class 名易变，建议用
data-action="edit"这类语义化属性代替class="btn-edit"做匹配，更健壮
- 用
