从0到1理解JS事件委托：让你的代码性能提升一个level

前言：

最近在学习JS事件机制时，被「事件委托」这个概念搞得晕头转向，看了很多文章还是似懂非懂。直到我动手敲了几个demo，突然就豁然开朗了！今天就用最接地气的方式，带大家一起搞懂事件委托到底是个啥，以及它能解决什么实际问题。

什么是事件流？

我们先从基础说起。当你点击页面上的一个按钮，这个点击事件可不是直接就触发了------它其实经历了三个阶段：

1.捕获阶段 ：事件从window开始，像石头沉水底一样一层层往下找目标元素（document → html → body → ... → 目标元素）

2.目标阶段 ：事件终于找到并触发在目标元素上

3.冒泡阶段 ：事件又像水泡一样往上冒，回到window（目标元素 → ... → body → html → document → window）

举个生活例子：就像快递配送，先从全国总仓（window）发到城市仓（document），再到区仓（body），最后送到你家（目标元素）------这是捕获；然后快递员还要回去交差------这就是冒泡。

举个简单例子：现在有一个大一点的parent父元素块，小一点的child子元素块

html 复制代码

    <style>
      #parent {
        width: 200px;
        height: 200px;
        background-color: red;
      }
      #child {
        width: 100px;
        height: 100px;
        background-color: blue;
      }
    </style>
    <...>
    <div id="parent">
      <div id="child"></div>
    </div>

我们现在为他们绑定一个点击事件：

js 复制代码

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的话就会在捕获阶段执行。

如果想要点击子元素时只执行当前监听器所绑定的事件，只需要阻止事件冒泡即可：

js 复制代码

document.getElementById("parent").addEventListener("click", function (e) {
    console.log("parent");
});
document.getElementById("child").addEventListener("click", function (e) {
    // 阻止事件冒泡
    e.stopPropagation();
    console.log("child");
});

为什么需要事件委托？

先看一个反面教材。假设我们有个列表，要给每个列表项添加点击事件：

html 复制代码

<ul id="list">
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
</ul>

那么我们可能就会直接为每个li单独绑定事件：

html 复制代码

// 单独绑定
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（浏览器），而是通过部门经理（父元素）统一汇报工作。

基本实现

html 复制代码

// 委托给父元素ul
document.getElementById('list').addEventListener('click', function(e) {
  // e.target就是实际点击的li
  console.log(e.target.innerText);
});

就这么简单！不管有多少个子元素，我们只需要绑定一个事件监听。

事件委托实战案例

案例1：处理动态添加的元素

假设我们有个按钮，可以动态添加列表项：

html 复制代码

<ul id="myList">
  <li data-item="l1">Item 1</li>
  <li data-item="l2">Item 2</li>
  <li data-item="l3">Item 3</li>
  <li data-item="l4">Item 4</li>
</ul>
<button id="btn">添加节点</button>

用事件委托的话，新增的li自动就有点击事件了：

js 复制代码

// 委托给父元素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显示菜单，点击菜单内部不关闭，点击其他地方关闭菜单。

html 复制代码

  <style>
    #toggleBtn{
      cursor:pointer
    }
    #menu{
      display:none;
      position:absolute;
      top: 50px;
      left: 50px;
      background-color: pink;
      width: 100px;
      height: 100px;
    }
  </style>
  <...code...>
<div id="toggleBtn">Toggle Menu</div>
<div id="menu">
  <p>Menu Context</p>
</div>

实现思路：

给toggleBtn绑定点击事件，显示菜单
给菜单绑定点击事件，阻止冒泡（关键！）
给document绑定点击事件，关闭菜单

js 复制代码

// 点击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. 精准判断目标元素

有时候父元素里有多种子元素，我们需要判断点击的是哪种元素：

html 复制代码

// 只处理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等没有冒泡的事件 ❌ 过度使用可能导致逻辑复杂

什么时候用事件委托

列表项点击事件
动态生成的元素（如评论、商品列表）
页面有大量相似元素需要绑定事件
需要实现点击外部关闭的功能

总结

事件委托就像生活中的「代理模式」，通过父元素代理子元素的事件，既提高了性能，又解决了动态元素的问题。核心就是利用事件冒泡机制，记住这句话：「事件委托，一劳永逸」。

希望这篇文章能帮你彻底搞懂事件委托！有问题欢迎在评论区交流！