js事件委托是什么？

事件委托是一种 JavaScript 编程技术，用于在父元素上设置事件监听器，以捕获其子元素的事件。这种技术通常用于动态生成元素的场景，其中子元素的增删改频繁，如果直接在子元素上设置事件监听器，会使得代码复杂且难以维护。

事件委托的核心思想是利用事件冒泡机制，在父元素上设置事件监听器，当子元素发生事件时，该事件会冒泡到父元素，然后触发父元素的事件监听器。通过这种方式，我们可以实现对大量子元素的统一管理，提高代码的复用性和可维护性。

事件委托的应用非常广泛，例如在表单验证、分页器、模态框等场景中都有应用。使用事件委托可以大大减少代码量，提高代码的可读性和可维护性。以下是一个简单的 JavaScript 事件委托示例：

假设有一个 ul 元素，其内部包含多个 li 元素。我们想要给每个 li 元素添加一个点击事件监听器，但不想在每个 li 元素上单独设置事件监听器。我们可以使用事件委托来解决这个问题。

HTML 代码如下

<ul id="list">

  <li>Item 1</li>

  <li>Item 2</li>

  <li>Item 3</li></ul>

JavaScript 代码如下：

document.getElementById('list').addEventListener('click', function(event) {

  // 判断事件源是否为 li 元素

  if (event.target.tagName === 'LI') {

    console.log('You clicked an li element:', event.target.textContent);

  }

});

 

在这个例子中，我们在 ul 元素上设置了一个点击事件监听器。当用户点击 ul 元素内部的任何子元素时，事件会冒泡到 ul 元素，触发该事件监听器。在事件处理函数中，我们通过 event.target 来获取被点击的元素，然后判断是否为 li 元素，并进行相应的处理。

这种方法可以减少对大量子元素的单独处理，提高了代码的复用性和可维护性。