事件委托是将子元素事件监听绑定到共同父元素上，利用事件冒泡和event.target识别目标元素。适用于动态添加元素、提升性能、统一逻辑控制等场景，但focus、blur、mouseenter、mouseleave等不冒泡事件不可委托。
事件委托是什么：用一个监听器管住一堆子元素
事件委托不是新注册一个事件，而是把本该绑定在子元素上的事件监听，改绑到它们的共同父元素上，靠 event.target 来识别真正被点击的是谁。本质是利用了事件冒泡机制——子元素触发事件后，会一层层往上传到父元素。
比如你有一组动态生成的 <button></button>，每次新增按钮都去调 addEventListener 很麻烦；换成给它们的容器（比如 <div id="list">）绑一次 <code>click，再判断 event.target 是不是 button，就一劳永逸了。
为什么不用直接绑定？这些情况必须用委托
直接绑定在子节点上，在以下场景会失效或低效：
- 元素是异步加载或 JS 动态插入的（比如
innerHTML += '<button>删除</button>'），新节点根本没绑监听器 - 列表很长（成百上千个
<li>），每个都绑click会创建大量监听函数，占用内存且影响性能 - 需要统一控制逻辑（比如所有操作都要先校验权限），集中处理比分散在各处更易维护
event.target 和 event.currentTarget 别搞混
这是最容易出错的地方：在委托中，event.target 指的是你真正点击的那个最深的元素（比如某个 <span></span>），而 event.currentTarget 才是监听器实际绑定的父元素（比如 <ul></ul>）。如果你写 event.target.classList.add('active') 却没加类型判断，可能点到文字就给 <span></span> 加 class，而不是整个 <li>。
立即学习“Java免费学习笔记（深入）”；
常用安全写法是向上查找匹配的“目标元素”：
document.getElementById('list').addEventListener('click', function(e) {
const btn = e.target.closest('button'); // 只有点击 button 或其内部元素才命中
if (btn) {
console.log('点了按钮:', btn.dataset.id);
}
});
委托不是万能的：这些事件不支持冒泡，不能委托
不是所有事件都能靠冒泡实现委托。以下事件没有冒泡阶段，绑在父元素上永远收不到：
-
focus、blur→ 改用focusin/focusout（它们支持冒泡） -
mouseenter、mouseleave→ 它们本来就是为避免频繁触发设计的，不冒泡；如需委托，改用mouseover+event.relatedTarget判断进出 -
load、error（在<img alt="JavaScript事件委托是什么_它有什么优势【教程】" >等上）→ 这些压根不冒泡，只能单独监听
真正在生产环境用委托时，第一步永远是查 MDN 确认这个事件是否可冒泡——别想当然。
