事件委托有哪些优点？

事件委托是一种JavaScript编程技术，它通过将事件处理程序绑定到父元素而不是每个子元素来处理事件。它有以下几个优点：

1. 减少事件处理程序的数量

通过将事件处理程序绑定到父元素，而不是每个子元素，可以大大减少事件处理程序的数量。这可以减少页面的内存使用，并提高性能。

2. 动态添加元素无需重新绑定事件

通过事件委托，我们可以处理动态添加到页面中的元素的事件，而无需重新绑定事件处理程序。这样可以简化代码，并提高可维护性。

3. 支持事件冒泡

通过事件委托，我们可以利用事件冒泡机制来处理子元素的事件。这可以使我们更容易处理嵌套元素的事件，并提高代码的可读性和可维护性。

下面是一个使用事件委托的例子，假设我们有一个ul元素，其中包含多个li元素，我们需要为每个li元素添加点击事件处理程序。使用事件委托，我们可以将事件处理程序绑定到ul元素上，而不是每个li元素上：

<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

const list = document.getElementById('list');
list.addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    console.log('You clicked on', event.target.innerText);
  }
});

这样，我们只需要绑定一个事件处理程序，就可以处理所有li元素的点击事件。并且，如果我们动态地添加新的li元素，它们也会自动绑定事件处理程序，而不需要重新绑定事件。