js delegate事件委托|极客笔记

js delegate事件委托

什么是事件委托？

在前端开发中，我们常常需要为 DOM 元素添加事件监听器来触发特定的操作。通常情况下，我们会为每个需要绑定事件的元素单独添加监听器。然而，当页面中的元素过多时，这种方式会造成性能问题。此时，事件委托就派上用场了。

事件委托是一种利用冒泡原理，将事件监听器添加到父元素（或者祖先元素）上，利用事件冒泡的特性来处理子元素的事件。这样一来，我们只需要在页面上少量的几个元素上添加监听器，就能够处理大量的子元素事件。

为什么使用事件委托？

使用事件委托的好处有以下几点：

减少内存消耗：通过添加一个监听器，可以统一管理多个子元素的事件，避免每个子元素都绑定事件监听器所产生的内存消耗。
动态添加的元素也可以被监听到：如果页面中的元素是使用 JavaScript 动态添加的，那么直接给这些元素绑定事件监听器是无法起作用的。而通过事件委托，可以在父元素上绑定监听器，确保动态添加的元素也能够被监听到。
代码维护更简洁：通过将事件绑定到父元素上，可以减少事件监听器的数量，使代码逻辑更加清晰和易于维护。

如何使用事件委托？

要使用事件委托，我们需要遵循以下几个步骤：

找到合适的父元素：选择一个合适的父元素，该父元素应该包含所有需要触发指定操作的子元素。
绑定事件监听器：在父元素上绑定事件监听器，监听需要触发指定操作的事件。
判断事件目标：在事件监听器中，判断事件的目标元素是否为需触发操作的子元素。
执行相应的操作：如果事件的目标元素是我们希望触发操作的子元素，那么执行相应的操作逻辑。

以下是一个示例代码，演示了如何使用事件委托来监听点击事件并处理子元素的事件：

<!DOCTYPE html>
<html>
<head>
  <title>事件委托示例</title>
</head>
<body>
  <ul id="parent">
    <li>子元素1</li>
    <li>子元素2</li>
    <li>子元素3</li>
    <li>子元素4</li>
  </ul>

  <script>
    // 找到父元素
    const parent = document.getElementById('parent');

    // 绑定事件监听器
    parent.addEventListener('click', function(event) {
      // 判断事件目标
      const target = event.target;
      if (target.nodeName === 'LI') {
        // 执行相应的操作
        console.log('点击了子元素：', target.textContent);
      }
    });
  </script>
</body>
</html>

在上述示例中，我们为父元素 <ul> 绑定了一个点击事件监听器。当点击子元素 <li> 时，事件通过冒泡机制传播到父元素，并触发父元素上的点击事件监听器。通过判断事件的目标元素是否为 <li>，我们可以确定点击的是哪个子元素，并进行相应的操作。