前言：
最近在学习JS事件机制时，被「事件委托」这个概念搞得晕头转向，看了很多文章还是似懂非懂。直到我动手敲了几个demo，突然就豁然开朗了！今天就用最接地气的方式，带大家一起搞懂事件委托到底是个啥，以及它能解决什么实际问题。
什么是事件流？
我们先从基础说起。当你点击页面上的一个按钮，这个点击事件可不是直接就触发了——它其实经历了三个阶段：
1.捕获阶段 ：事件从window开始，像石头沉水底一样一层层往下找目标元素（document → html → body → ... → 目标元素）
2.目标阶段 ：事件终于找到并触发在目标元素上
3.冒泡阶段 ：事件又像水泡一样往上冒，回到window（目标元素 → ... → body → html → document → window）
举个生活例子：就像快递配送，先从全国总仓（window）发到城市仓（document），再到区仓（body），最后送到你家（目标元素）——这是捕获；然后快递员还要回去交差——这就是冒泡。
举个简单例子：现在有一个大一点的parent父元素块，小一点的child子元素块
<...>
我们现在为他们绑定一个点击事件：
document.getElementById("parent").addEventListener("click", function (e) {
console.log("parent");
});
document.getElementById("child").addEventListener("click", function (e) {
console.log("child");
});
我们发现单独点击红色块时只打印了parent，但是点击蓝色块时打印了两个值，说明点击子元素时父元素绑定的事件也会执行
为什么会这样呢？我们再看看事件流的三个阶段：捕获阶段->目标阶段->冒泡阶段
当点击蓝色child元素时，监听器是在冒泡阶段响应点击事件，输出 child 后从child元素向上传播到parent元素再次响应点击事件，最后到window对象。
我们可能会想：为什么一定是在冒泡阶段执行呢？不能在捕获阶段吗？当然可以，但是首先得让我们看addEventListener函数的语法：
addEventListener(type,listener,useCapture)
现在我们清楚了，原来useCapture默认为false，这导致监听器在捕获阶段时不会触发listener，而是向上冒泡时触发，所以我们将useCapture改为true的话就会在捕获阶段执行。
如果想要点击子元素时只执行当前监听器所绑定的事件，只需要阻止事件冒泡即可：
document.getElementById("parent").addEventListener("click", function (e) {
console.log("parent");
});
document.getElementById("child").addEventListener("click", function (e) {
// 阻止事件冒泡
e.stopPropagation();
console.log("child");
});
为什么需要事件委托？
先看一个反面教材。假设我们有个列表，要给每个列表项添加点击事件：
- item1
- item2
- item3
那么我们可能就会直接为每个li单独绑定事件：
// 单独绑定
const lis = document.querySelectorAll('#list li');
for (let item of lis) {
item.addEventListener('click', function(e) {
console.log(e.target.innerText);
});
}
我们会发现这种写法有两个致命问题：
性能差 ：如果有1000个列表项，就要绑定1000个事件监听，浏览器表示压力山大
动态元素失效 ：后来动态添加的li（比如点击按钮新增的）不会有点击事件
所以这个时候就需要我们的事件委托派上用场了。
事件委托：一招解决所有烦恼
什么是事件委托？
简单说就是： 把事件绑定在父元素上，利用事件冒泡机制，让父元素帮子元素处理事件 。
就像公司里，员工（子元素）不用每个人都直接对接CEO（浏览器），而是通过部门经理（父元素）统一汇报工作。
基本实现
// 委托给父元素ul
document.getElementById('list').addEventListener('click', function(e) {
// e.target就是实际点击的li
console.log(e.target.innerText);
});
就这么简单！不管有多少个子元素，我们只需要绑定 一个事件监听。
事件委托实战案例
案例1：处理动态添加的元素
假设我们有个按钮，可以动态添加列表项：
- Item 1
- Item 2
- Item 3
- Item 4
用事件委托的话，新增的li自动就有点击事件了：
// 委托给父元素myList
document.getElementById('myList').addEventListener('click', function(e) {
console.log(e.target.innerText);
});
// 动态添加li
document.getElementById('btn').addEventListener('click', function() {
const li = document.createElement('li');
li.appendChild(document.createTextNode('newItem'));
document.getElementById('myList').appendChild(li);
});
关键点：新增的li不需要再绑定事件，因为事件是委托给父元素的！
案例2：点击外部关闭菜单
这是个非常实用的场景：点击Menu显示菜单，点击菜单内部不关闭，点击其他地方关闭菜单。
<...code...>
实现思路：
给toggleBtn绑定点击事件，显示菜单
给菜单绑定点击事件，阻止冒泡（关键！）
给document绑定点击事件，关闭菜单
// 点击Menu显示/隐藏菜单
toggleBtn.addEventListener('click', function(e) {
menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
e.stopPropagation(); // 阻止冒泡到document
});
// 点击菜单内部不关闭
menu.addEventListener('click', function(e) {
e.stopPropagation(); // 关键：阻止事件冒泡
});
// 点击页面其他地方关闭菜单
document.addEventListener('click', function() {
menu.style.display = 'none';
});
这里的 e.stopPropagation() 就像「拦截快递」，不让事件继续冒泡上去。
事件委托最佳实践
1. 精准判断目标元素
有时候父元素里有多种子元素，我们需要判断点击的是哪种元素：
// 只处理li元素的点击
if(e.target.tagName.toLowerCase() === 'li') {
console.log('这是列表项：', e.target.innerText);
}
// 或者根据自定义属性判断
if(e.target.dataset.item) {
console.log('item属性值：', e.target.dataset.item);
}
2. 委托到最近的静态父元素
不要把所有事件都委托到document上，而是委托到 离目标元素最近的、不会被动态删除的父元素 。
3. 注意事件冒泡的影响
如果子元素也有事件监听，要注意事件执行顺序。必要时用 e.stopPropagation() 阻止冒泡，但不要过度使用，可能会影响其他功能。
事件委托优缺点总结
优点
✅ 性能优化 ：减少事件监听数量
✅ 动态友好 ：自动支持动态添加的元素
✅ 代码简洁 ：只需写一次事件处理逻辑
缺点
❌ 不适合所有事件：如focus、blur等没有冒泡的事件
❌ 过度使用可能导致逻辑复杂
什么时候用事件委托
列表项点击事件
动态生成的元素（如评论、商品列表）
页面有大量相似元素需要绑定事件
需要实现点击外部关闭的功能
总结
事件委托就像生活中的「代理模式」，通过父元素代理子元素的事件，既提高了性能，又解决了动态元素的问题。核心就是利用事件冒泡机制，记住这句话： 「事件委托，一劳永逸」 。
希望这篇文章能帮你彻底搞懂事件委托！有问题欢迎在评论区交流！