面试题：JavaScript性能优化之事件委托

事件委托原理

事件委托是利用事件冒泡的特性。当一个事件发生在某个元素上时，该事件会从该元素开始，沿着 DOM 树向上传播，依次经过它的父元素，直到根元素。通过将事件处理程序绑定到共同的祖先元素上，当事件触发时，在祖先元素的事件处理程序中可以根据事件的目标（event.target）来判断实际触发事件的元素，从而执行相应的操作。这样可以减少事件处理程序的数量，提高性能。

利用事件委托优化性能示例（无序列表大量列表项点击事件）

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>事件委托示例</title>
</head>

<body>
  <ul id="list">
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <!-- 大量列表项 -->
  </ul>
  <script>
    const list = document.getElementById('list');
    list.addEventListener('click', function (event) {
      if (event.target.tagName === 'LI') {
        console.log('点击了列表项: ', event.target.textContent);
      }
    });
  </script>
</body>

</html>

在上述代码中，我们没有为每个 <li> 元素单独绑定点击事件，而是将点击事件处理程序绑定到了 <ul> 元素上。当点击任何一个 <li> 元素时，由于事件冒泡，点击事件会传播到 <ul> 元素，在 <ul> 的点击事件处理程序中，通过判断 event.target 是否为 <li> 元素，来决定是否执行相应操作，这样就避免了为大量列表项分别绑定事件处理程序，优化了性能。

星途面试题库

面试题：JavaScript性能优化之事件委托

知识考点

面试题答案

事件委托原理

利用事件委托优化性能示例（无序列表大量列表项点击事件）