前端必会核心：事件代理，轻松监听所有元素事件

前端

2023-09-17 21:09:05

在前端开发中，事件代理是一种强大的技术，它允许我们使用一个单一的事件处理程序来监听来自多个元素的事件。这极大地简化了事件处理，提高了代码的效率和可维护性。

事件代理的工作原理

事件代理基于DOM事件冒泡的原理。当某个元素触发事件时，该事件会沿DOM树向上冒泡，直到遇到匹配的事件处理程序。事件代理利用这一点，通过在父元素上设置事件处理程序，来监听来自子元素的所有事件。

事件代理的优点

使用事件代理有以下优点：

提高性能： 只创建一个事件处理程序，而不是为每个子元素创建单独的处理程序，从而提高性能。
代码简洁： 减少了代码量，使代码更简洁、更易于维护。
灵活性： 即使在事件目标发生变化时，仍然可以捕获事件，无需修改事件处理程序。

实现事件代理

使用JavaScript实现事件代理非常简单，如下所示：

const parentElement = document.querySelector('.parent');

parentElement.addEventListener('click', (event) => {
  // 获取事件目标元素
  const targetElement = event.target;

  // 根据目标元素执行操作
  switch (targetElement.tagName) {
    case 'BUTTON':
      // ...
      break;
    case 'INPUT':
      // ...
      break;
    default:
      // ...
      break;
  }
});

在上面的示例中，我们为父元素parentElement设置了一个click事件处理程序。当父元素或其任何子元素触发click事件时，都会调用该事件处理程序。我们使用event.target属性获取事件目标元素，并根据目标元素的标签名执行相应的操作。

高级事件代理

为了进一步提高事件代理的灵活性，可以使用委托来过滤事件。委托允许我们在父元素上设置事件处理程序，但只处理来自特定子元素的事件。例如，我们可以使用以下代码只监听父元素中button元素的click事件：

const parentElement = document.querySelector('.parent');

parentElement.addEventListener('click', (event) => {
  // 获取事件目标元素
  const targetElement = event.target;

  // 仅处理 button 元素的事件
  if (targetElement.tagName !== 'BUTTON') {
    return;
  }

  // 执行操作
  // ...
});