事件委托（Event Delegation）是 JavaScript 中的一种处理事件的技巧。通过事件委托，我们可以将事件处理器添加到一个父级元素上，而不是为每一个子元素都添加事件处理器。这种方法不仅简化了代码，而且提升了性能，特别是在有大量子元素的情况下。

事件委托的原理•

事件委托依赖于事件冒泡机制。事件冒泡是指事件从目标元素向上冒泡到其父元素，直到根元素（通常是 document）。通过在父元素上设置事件处理器，我们可以捕获子元素上的事件。

事件委托的步骤•

  1. 选择父元素：选择一个包含所有需要监听事件的子元素的公共父元素

  2. 添加事件处理器：在父元素上添加一个事件处理器

  3. 确定事件目标：在事件处理器中，通过event.target确定实际触发事件的子元素

  4. 过滤和处理事件：根据需要过滤和处理特定的子元素事件

示例•

1
2
3
4
5
6
<ul id="buttonList">
    <li><button>Button 1</button></li>
    <li><button>Button 2</button></li>
    <li><button>Button 3</button></li>
    <!-- 可能还有更多的按钮 -->
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 选择父元素
const buttonList = document.getElementById('buttonList')

// 添加事件处理器到父元素
buttonList.addEventListener('click', function(event) {
    // 确定实际触发事件的元素
    const target = event.target;

    // 检查点击的是否是按钮
    if (target.tagName.toLowerCase() === 'button') {
        // 执行处理逻辑
        alert(`You clicked ${target.textContent}`);
    }
})

适用场景•

  • 动态生成的内容

  • 列表项

  • 表格中的单元格