事件委托是通过在父元素监听点击事件并利用冒泡机制识别子元素，避免为每个子元素单独绑定事件导致内存高、动态添加难、维护成本高等问题；需选对容器、监听冒泡、精准识别目标，支持嵌套结构和位置计算，但层级过深或需阻止冒泡时需谨慎使用。
在父元素上统一管理子元素点击事件，核心方法是事件委托——把监听器只加在父元素上，利用事件冒泡机制捕获子元素触发的点击，再通过 event.target 判断具体是哪个子元素被点中。
为什么不用给每个子元素单独绑定？
直接为每个子元素调用 addEventListener 会带来三个实际问题：
- 页面有 100 个按钮，就得创建 100 个监听函数，内存占用高、性能差
- 后续用 JS 动态插入新按钮时，必须手动再绑一次事件，容易遗漏
- 逻辑分散，修改点击行为要改多处，维护成本高
怎么写一个可靠的委托监听器？
关键三步：选对父容器、监听冒泡阶段、精准识别目标元素。例如处理所有带 class="action-btn" 的按钮：
const container = document.querySelector('.list-container');
container.addEventListener('click', function (e) {
// 检查点击的是否是目标按钮（支持后代嵌套）
if (e.target.matches('.action-btn') || e.target.closest('.action-btn')) {
console.log('点了按钮：', e.target.textContent);
// 这里可读取 data-* 属性、触发对应操作
}
});e.target.matches() 判断是否直接命中；e.target.closest() 支持按钮内含图标、文字等子节点的场景，更健壮。
立即学习“Java免费学习笔记（深入）”；
如何获取被点按钮所在的父级位置？
常见需求：点某个按钮，要知道它属于第几个 .row。不需要遍历或提前存索引，用 DOM 方法实时计算即可：
container.addEventListener('click', function (e) {
const btn = e.target.closest('.action-btn');
if (!btn) return;
<p>const row = btn.closest('.row');
if (!row) return;</p><p>// 获取该 row 在所有 .row 中的索引
const rows = Array.from(document.querySelectorAll('.row'));
const index = rows.indexOf(row);</p><p>console.log('所在行索引：', index);
});这种方式不依赖数据绑定或额外属性，适用于静态结构或动态渲染后未重排的列表。
什么情况下不适合用事件委托？
不是所有场景都适用，注意这两个边界：
- 父容器层级过深（比如直接挂在
document上），可能误捕其他区域点击，需加强if条件过滤 - 子元素需要阻止冒泡（如弹出菜单内的关闭按钮），委托后仍可调用
e.stopPropagation()，但要确保不影响父逻辑
