问题: 说明下事件和事件代理

事件是指在网页中用户和浏览器交互时发生的各种动作，如鼠标点击、键盘敲击、窗口大小改变等。为了能够响应这些事件，需要使用 JavaScript 来编写事件处理函数，对事件进行监听和处理。

事件代理（Event Delegation）是一种在多个子元素中注册事件监听器，以代替为每个子元素分别注册事件监听器的方式。它通过在父元素上捕获事件，然后根据事件的目标元素来执行相应的处理逻辑。事件代理的优点在于，不需要为每个子元素注册事件监听器，从而减少了代码量和内存占用，并且可以处理动态添加或删除的子元素。

事件代理的实现原理是利用事件的冒泡机制。当子元素上触发一个事件时，该事件会向上冒泡到父元素，直到文档对象。因此，我们可以在父元素上注册事件监听器，然后根据事件的目标元素来判断需要执行什么样的操作。

例如，假设有一个列表，其中每个列表项都有一个删除按钮，我们可以使用事件代理来为整个列表注册一个点击事件监听器，然后根据事件的目标元素来判断是否点击了删除按钮，从而执行删除操作。示例代码如下：

const list = document.querySelector('ul');
list.addEventListener('click', function(event) {
  if (event.target.tagName === 'BUTTON') {
    const listItem = event.target.closest('li');
    listItem.remove();
  }
});

在上面的代码中，我们为列表元素 ul 注册了一个点击事件监听器，当点击任意一个子元素时，事件都会冒泡到 ul 元素。然后我们判断事件的目标元素是否为按钮，如果是，则获取它所在的列表项，并从 DOM 中删除该列表项。