怎样用JavaScript实现事件委托？

事件委托是JavaScript中基于事件冒泡机制实现的高效事件处理方式，核心思路是不用给每个子元素单独绑定事件，而是把事件绑定到它们的共同父元素上，通过判断触发事件的子元素来执行对应的逻辑。

事件委托的实现原理

DOM事件流包含捕获和冒泡两个阶段，事件委托基于事件冒泡机制实现：当一个子元素触发事件后，这个事件会沿着DOM树向上传播，直到到达根节点。我们只需要给父元素绑定事件监听器，在监听器内部判断事件的触发目标是不是我们需要的子元素，就可以批量处理所有子元素的相同类型事件。

基础实现示例

最常见的场景是处理<ul>下的多个<li>的点击事件，传统方式需要给每个<li>单独绑定事件，而事件委托只需要给父元素<ul>绑定一次事件即可。

首先给出HTML结构：

<ul id="list">
  <li data-id="1">列表项1</li>
  <li data-id="2">列表项2</li>
  <li data-id="3">列表项3</li>
</ul>

接下来是JavaScript实现事件委托的代码：

// 获取父元素ul
const list = document.getElementById('list');
// 给父元素绑定点击事件
list.addEventListener('click', function(event) {
  // 获取触发事件的目标元素
  const target = event.target;
  // 判断目标元素是不是li标签
  if (target.tagName.toLowerCase() === 'li') {
    // 获取li的自定义属性data-id
    const id = target.getAttribute('data-id');
    console.log('点击了列表项，id为：' + id);
    // 这里可以写对应的业务逻辑
  }
});

动态生成子元素的场景适配

事件委托最大的优势是适配动态生成的子元素，不需要在新元素生成后重新绑定事件。比如我们通过按钮动态新增<li>元素：

const addBtn = document.getElementById('addBtn');
let count = 4;
// 新增按钮点击事件
addBtn.addEventListener('click', function() {
  const newLi = document.createElement('li');
  newLi.setAttribute('data-id', count);
  newLi.textContent = '列表项' + count;
  list.appendChild(newLi);
  count++;
});

上面的新生成的<li>元素不需要单独绑定点击事件，点击后依然会触发父元素<ul>的事件监听器，符合我们的判断逻辑。

匹配特定子元素的技巧

如果父元素下有不同层级的子元素或者多种类型的子元素，直接用tagName判断可能不够精准，我们可以结合class属性或者matches方法来匹配。

比如子元素内部还有<span>标签，点击<span>时事件目标会是<span>而不是<li>，这时候可以用closest方法向上查找匹配的父元素：

list.addEventListener('click', function(event) {
  // 向上查找最近的匹配li选择器的元素
  const liTarget = event.target.closest('li');
  if (liTarget) {
    const id = liTarget.getAttribute('data-id');
    console.log('点击了列表项，id为：' + id);
  }
});

也可以用matches方法直接判断元素是否符合选择器：

list.addEventListener('click', function(event) {
  const target = event.target;
  // 判断元素是否匹配li选择器
  if (target.matches('li')) {
    const id = target.getAttribute('data-id');
    console.log('点击了列表项，id为：' + id);
  }
});

注意事项

• 不是所有事件都支持冒泡，比如focus、blur事件默认不冒泡，这类事件不适合用事件委托，或者可以改用支持冒泡的focusin、focusout事件。
• 事件委托的逻辑中尽量减少复杂的判断逻辑，避免影响事件处理性能。
• 如果子元素的事件处理逻辑差异很大，不适合用事件委托，反而会增加代码复杂度。

JavaScript事件委托事件冒泡ul_liaddEventListener修改时间：2026-06-06 07:45:00