前端面试题 - 74. 什么是事件委托？它有什么好处？

事件委托事

件委托（Event Delegation）是一种JavaScript编程模式，通过将事件处理程序添加到父元素而不是将它们直接添加到子元素上，来管理事件。当一个事件发生在一个子元素上时，它会冒泡到父元素，如果父元素有一个与该事件相关的处理程序，则它将被调用。

事件委托有以下好处：

1. 提高性能：当我们需要处理大量的子元素时，事件委托可以减少事件处理程序的数量，从而提高性能。
2. 动态元素处理：事件委托可以自动处理动态生成的元素，而不需要手动绑定事件处理程序。
3. 简化代码：使用事件委托可以简化代码，因为我们只需要将事件处理程序添加到父元素上，而不是每个子元素上都添加一遍。这也使得代码更容易维护和理解。

例子

比如说我们有一个列表，其中每个列表项都有一个按钮，我们需要为这些按钮添加事件处理程序。如果我们使用传统的方法，需要为每个按钮单独绑定事件处理程序：

<ul>
  <li><button onclick="handleClick()">按钮1</button></li>
  <li><button onclick="handleClick()">按钮2</button></li>
  <li><button onclick="handleClick()">按钮3</button></li>
  ...
</ul>

但是，如果我们使用事件委托，只需要将事件处理程序添加到父元素上：

<ul onclick="handleClick(event)">
  <li><button>按钮1</button></li>
  <li><button>按钮2</button></li>
  <li><button>按钮3</button></li>
  ...
</ul>

然后在事件处理程序中，可以通过判断事件源来确定点击的具体元素：

function handleClick(event) {
  if (event.target.nodeName === 'BUTTON') {
    // 处理按钮点击事件
  }
}

这样做的好处是，无论我们有多少个按钮，只需要将事件处理程序添加到父元素上一次即可，而不需要为每个按钮单独添加事件处理程序。