事件代理（Event Delegation）是指将事件处理程序添加到其父元素上，而不是将其添加到每个子元素上。当事件触发时，事件将从子元素向上传递到其父元素，然后由父元素上的事件处理程序处理。

事件代理有以下几个优点：

减少事件处理程序的数量，减少内存占用和处理开销。
适用于动态添加或删除的子元素，无需重新绑定事件处理程序。
可以简化代码结构，减少重复代码。
以下是一个示例代码，演示了事件代理的应用：

<ul id="list">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
</ul>
javascript
Copy code
const list = document.getElementById('list');
list.addEventListener('click', function(event) {
  const target = event.target;
  if (target.tagName === 'LI') {
    console.log(`clicked on ${target.textContent}`);
  }
});

在上述代码中，我们为父元素

添加了一个点击事件处理程序，并通过event.target获取到触发事件的目标元素。如果目标元素是一个
• 元素，则打印出该元素的文本内容。由于事件冒泡机制，当我们点击子元素
• 时，事件将从子元素向上传递到父元素
  ，由父元素上的事件处理程序处理。这种方式可以有效地减少事件处理程序的数量，代码结构也更加简洁。

  事件代理是一种非常实用的技术，在处理大量动态生成的子元素时非常有效。通过为父元素添加事件处理程序，可以简化代码逻辑，减少重复代码。