JavaScript DOM 操作：什么是事件委托（Event Delegation）？有什么优势？

事件委托（Event Delegation）是一种利用事件冒泡机制的技术，通过将事件处理程序绑定到一个父元素，以处理其子元素上的事件。简而言之，事件被委托给父元素来管理。

在事件冒泡中，当子元素上的事件触发时，这个事件会一直向上冒泡到父元素，直至达到文档根元素。事件委托利用这个冒泡机制，将事件处理放在父元素上，根据事件的目标来判断具体是哪个子元素触发了事件。

以下是一个使用事件委托的简单示例：

<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<script>
  document.getElementById('myList').addEventListener('click', function(event) {
    
    if (event.target.tagName === 'LI') {
    
      console.log('You clicked on item: ' + event.target.textContent);
    }
  });
</script>

在这个例子中，事件处理程序被绑定到<ul>元素上，而不是每个<li>元素。当用户点击列表项时，事件冒泡到<ul>，事件处理程序判断触发事件的是<li>元素，然后执行相应的操作。

事件委托的优势包括：

1. 性能优化： 当页面上有大量元素需要绑定事件时，将事件处理程序绑定到父元素上会更加高效。因为不需要为每个子元素都绑定事件处理函数，而是只需要一个事件处理函数在父元素上。

2. 动态元素： 对于动态添加的元素，无需重新绑定事件，因为它们仍然是父元素的子元素。这对于通过 AJAX 或其他方式动态加载内容的情况很有用。

3. 代码简化： 减少了冗余的事件处理代码，使代码更加简洁易读。只需要在一个地方维护事件处理逻辑。

4. 容易维护： 在事件委托模式下，如果需要修改或添加事件处理逻辑，只需在父元素上进行修改，而不需要在每个子元素上进行修改。

总的来说，事件委托是一种优化事件处理的有效方式，可以提高性能、简化代码并增强代码的可维护性。