JS 事件委托

news2024/11/18 14:52:10

JavaScript事件委托（Event delegation）又叫事件代理，是一种在父元素上监听事件，然后通过事件冒泡机制来处理子元素的事件的技术。通过事件委托，可以避免为每个子元素都绑定事件处理程序，提高性能并简化代码。

事件委托的基本原理是将事件处理程序绑定在父元素上，然后通过事件冒泡捕获到子元素的事件触发。这样，无论子元素是现有的还是动态生成的，它们的事件都会被父元素捕获并处理。

<!DOCTYPE html>
<html>
<head>
  <title>事件委托示例</title>
</head>
<body>
  <ul id="list">
    <li>项目1</li>
    <li>项目2</li>
    <li>项目3</li>
    <li>项目4</li>
  </ul>

  <script>
    // 获取父元素
    var list = document.getElementById('list');

    // 添加点击事件监听器到父元素
    list.addEventListener('click', function(event) {
      // 检查目标元素是否是列表项
      if (event.target.tagName === 'LI') {
        // 在控制台输出被点击的列表项的文本内容
        console.log(event.target.textContent)
      }
    })
  </script>
</body>
</html>

一、事件捕获

事件捕获（Event Capturing）是事件传播的一种阶段，它是事件冒泡的前置阶段。在事件捕获阶段，事件从最外层的祖先元素开始，逐级向下传播，直到达到目标元素。

二、事件冒泡

事件冒泡（Event Bubbling）是指在前端网页开发中，当一个元素上的事件被触发时，如果该元素上有注册该事件的处理程序，那么这个事件会沿着元素的层次结构向上冒泡，依次触发父元素的同一事件。

当某个元素上发生了一个事件，比如点击（click）事件，首先会执行该元素自身绑定的事件处理函数，然后这个事件会向上冒泡，触发父元素上绑定的相同事件处理函数。如果父元素也有父元素，那么事件会继续向上冒泡，依次触发更高层级的父元素上的事件处理函数，直到冒泡到文档的根元素（通常是 <html>元素）为止。

事件冒泡是浏览器默认的事件传播方式，但可以通过调用事件对象的 stopPropagation() 方法来停止事件的冒泡，阻止事件继续传播到上层元素。

三、为什么要使用事件委托

JavaScript中，页面内事件处理程序的个数会直接影响页面的整体性能，因为每个事件处理程序都是对象，对象会占用内存，内存中的对象越多，页面的性能则越差。事件委托技术可以避免对每个字元素添加事件监听器，减少操作DOM节点的次数，从而减少浏览器的重绘和重排，提高代码的性能。

四、事件委托实现原理

事件委托的实现原理是基于事件冒泡机制。当一个元素上发生了某个事件（如点击事件），事件会从触发元素开始向上冒泡，直到根节点。事件委托利用了事件冒泡的特性，将事件处理程序绑定在父元素上，通过事件冒泡捕获子元素的事件。

以下是事件委托的实现原理步骤：

1.给父元素绑定事件
2.给父元素定义事件，监听子元素的冒泡事件
3.找到是哪个子元素的事件，通过匿名回调函数的参数e用来接收事件对象，通过target获取触发事件的目标

五、事件委托的优缺点

优点	缺点
减少内存消耗	事件处理逻辑可能变得复杂
支持动态元素	不适用于捕获阶段的事件
提高性能	事件冒泡可能导致事件处理不准确
简化代码结构	需要合理选择合适的父元素
支持事件冒泡机制	某些事件无法冒泡（如滚动事件等）
提供统一的事件处理逻辑	事件委托的性能提升可能不明显，取决于具体情况