事件委托通过在父元素绑定单个监听器并利用事件冒泡机制，避免为每个子元素重复绑定，解决内存占用高、动态插入需重绑等问题；核心需父容器稳定、事件支持冒泡，并用event.target.closest()精准捕获目标元素。
用事件委托，把原本要绑成千上万个事件监听器的操作，变成只绑一个——这才是真正终结循环绑定噩梦的办法。
为什么 for 循环绑定是场噩梦
给每个 <li> 单独加 addEventListener，表面看逻辑清晰，实际一碰真实场景就崩：DOM 节点一多（比如 5000 条数据），内存占用飙升、页面卡顿、首屏渲染慢；更麻烦的是，后续动态插入的新列表项还得手动再绑一次，极易漏掉或出错。
事件委托的核心原理
利用事件冒泡机制：子元素触发的事件会一路向上跑到父容器。只要把监听器挂在共同父节点（比如 <ul>）上，再通过 event.target 判断具体点击的是哪个子元素，就能以一当千。
关键点：
- 父容器必须存在且稳定（不能是临时生成又销毁的）
- 事件类型得支持冒泡（click、mouseover 可以，focus、blur 不行，需另配）
- event.target 是实际被点击的元素，不是父容器
一行代码替代整个 for 循环
假设 HTML 是这样的：
<ul id="list"><li data-id="1">苹果</li>
<li data-id="2">香蕉</li>
<li data-id="3">橙子</li>
</ul>
原来写法（噩梦版）：
const items = document.querySelectorAll('#list li');items.forEach((item, i) => {
item.addEventListener('click', () => console.log('点了第', i + 1, '个'));
});
改成事件委托（清爽版）：
document.getElementById('list').addEventListener('click', (e) => {if (e.target.tagName === 'LI') {
console.log('点了', e.target.textContent);
// 或读取自定义属性：
console.log('ID 是', e.target.dataset.id);
}
});
进阶技巧：精准匹配 + 动态兼容
实际项目中常遇到嵌套结构（比如 <li><span>文字</span></li>），这时 e.target 可能是 <span> 而非 <li>。用 closest() 更稳：
const li = e.target.closest('li');
if (li) {
console.log('有效点击了列表项：', li.dataset.id);
}
});
这样哪怕用户点的是 <li> 里的图标、按钮、文字，都能正确捕获到所属的 <li>。
