事件委托通过在父元素绑定单个事件监听器，利用事件冒泡和event.target/matches()或closest()识别目标元素，避免为每个子元素重复绑定，提升性能、支持动态内容且便于维护。
用事件委托，就是只给父元素绑一次事件，靠事件冒泡机制来统一处理子元素的点击等操作，避免给每个子元素单独绑定事件导致性能浪费和内存泄漏。
为什么需要事件委托
假设页面有 100 个按钮，如果用 querySelectorAll('.btn').forEach(btn => btn.addEventListener('click', handler))，会创建 100 个监听器，DOM 动态增删时还得手动重新绑定或清理。事件委托只需绑定一次，天然支持动态内容，代码更轻、维护更简单。
核心写法：利用 event.target 和选择器匹配
在父容器上监听事件，通过 event.target 获取真正被点击的元素，再用 matches() 判断是否符合目标选择器：
document.getElementById('list').addEventListener('click', function(e) {
if (e.target.matches('button.delete')) {
const id = e.target.dataset.id;
deleteItem(id);
} else if (e.target.matches('a.edit')) {
editItem(e.target.dataset.id);
}
});
-
必须确保父容器存在且稳定（比如用
id或固定类名的包裹元素） -
e.target是实际触发事件的最深元素，不是绑定事件的那个父元素 -
matches()兼容性好（IE9+），也可用closest()向上查找最近匹配祖先（适合处理子元素内部点击）
处理嵌套结构：用 closest() 更稳妥
如果点击的是按钮里的图标或文字，e.target 可能是 <i></i> 或 <span></span>，直接 matches('button') 会失败。这时用 closest() 向上找：
立即学习“Java免费学习笔记（深入）”；
list.addEventListener('click', e => {
const btn = e.target.closest('button.action');
if (btn && btn.dataset.action === 'remove') {
removeItem(btn.dataset.id);
}
});
-
closest()从自身开始向上查，返回第一个匹配的祖先（含自己） - 比反复判断
parentNode更简洁安全 - 注意：IE 不支持，需用 polyfill 或改用
matches配合循环遍历父级
注意事项和常见坑
-
别忘了阻止默认行为或冒泡：比如表单内按钮点击提交，需
e.preventDefault()；若不希望事件继续向上触发，加e.stopPropagation() -
委托目标要合理：不要直接绑在
document或body上，除非全局逻辑需要；优先选语义明确、层级靠近的父容器 - 动态内容无需额外操作：新插入的子元素只要结构符合规则，自动响应委托事件
-
慎用箭头函数绑定 this：如果监听器里需访问父容器（如
this.querySelectorAll），用普通函数，箭头函数的this指向外层作用域
