前端中的事件委托：减少事件监听器的最佳实践

1. 什么是事件委托？

事件委托（Event Delegation）是利用 DOM 事件冒泡机制，将子元素的事件监听器统一绑定到父元素上。

例如，一个列表有 100 个按钮，传统方式需要绑定 100 个事件监听器，而事件委托只需要绑定一个。

2. 传统写法

const buttons = document.querySelectorAll('.item')

buttons.forEach((button) => {
  button.addEventListener('click', () => {
    console.log(button.textContent)
  })
})

这种方式的问题：

• 每个元素都需要绑定事件。
• 动态新增的元素需要重新绑定。
• 大量监听器增加了管理成本。

3. 使用事件委托

const list = document.querySelector('.list')

list.addEventListener('click', (event) => {
  const button = event.target.closest('.item')

  if (!button || !list.contains(button)) return

  console.log(button.textContent)
})

无论列表中有多少个 .item，都只需要一个事件监听器，而且动态新增的元素也能自动响应事件。

4. 注意事项

1. 事件冒泡

并不是所有事件都会冒泡，例如 focus 和 blur。可以使用 focusin 和 focusout 替代。

2. event.target 与 event.currentTarget

• target：实际触发事件的元素。
• currentTarget：当前绑定事件监听器的元素。

3. 使用 closest()

当按钮内部包含图标、文字等子元素时，直接判断 event.target 可能无法准确获取按钮，使用 closest() 更可靠。

5. 什么时候适合使用？

• 动态渲染的列表。
• 表格行操作。
• 菜单和导航栏。
• 大量重复交互元素。

总结： 事件委托可以减少事件监听器数量，同时天然支持动态元素，是处理复杂列表交互时非常实用的技巧。