事件委托最高效，只需在父容器绑定一次监听，利用冒泡机制统一处理子元素事件；避免循环绑定浪费内存与DOM开销，且动态元素自动生效。
用事件委托（Event Delegation）是最高效的方式——只在父容器上绑定一次监听，利用事件冒泡机制统一处理子元素的事件。
为什么不用循环逐个绑定？
为每个同类元素（比如 100 个 .btn）单独调用 addEventListener，会创建 100 个监听函数实例，占用更多内存，也增加 DOM 操作开销。尤其在动态增删元素时，还要反复绑定/解绑，维护成本高。
事件委托怎么写？
核心是：选一个稳定的父级容器（如 document、body 或某个包裹所有目标元素的 div），监听其上的事件，再通过 event.target 判断是否命中目标元素。
- 确保父容器存在且不会被频繁替换（推荐用 closest 的静态容器，而非
document） - 用
event.target.matches(selector)精准判断点击的是否是目标元素（支持复杂选择器，如".item.active[data-type='submit']"） - 注意事件类型匹配：点击用
click，输入用input，不要在div上监听change（它不冒泡）
一个实用示例
假设页面有多个按钮：<button class="action-btn" data-id="1">删除</button>，你想统一处理点击：
立即学习“Java免费学习笔记（深入）”；
document.querySelector('.container').addEventListener('click', function (e) {
if (e.target.matches('.action-btn')) {
const id = e.target.dataset.id;
console.log('操作 ID：', id);
// 执行删除逻辑...
}
});
后续动态插入的新按钮，无需额外绑定，自动生效。
需要注意的细节
有些事件（如 focus、blur、mouseenter）不冒泡，不能直接委托；可改用捕获阶段或监听 focusin/focusout（它们冒泡）。另外，避免在高频事件（如 scroll、mousemove）上无节制使用委托，必要时加节流。
