【前端】详解JavaScript事件代理（事件委托）

程序员洲洲

发布于 2024-06-11 08:37:29

870

发布于 2024-06-11 08:37:29

文章被收录于专栏：项目文章

前言

事件代理（Event Delegation），又称之为事件委托。是JavaScript中常用绑定事件的常用技巧。

顾名思义，“事件代理”即是把原本需要绑定在子元素的响应事件（click、keydown…）委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。

我们举一个通俗的例子来进行说明：

比如一个宿舍的同学同时快递到了，一种方法就是他们一个个去领取，还有一种方法就是把这件事情委托给宿舍长，让一个人出去拿好所有快递，然后再根据收件人一一分发给每个宿舍同学。

在这里，取快递就是一个事件，每个同学指的是需要响应事件的 DOM 元素，而出去统一领取快递的宿舍长就是代理的元素，所以真正绑定事件的是这个元素，按照收件人分发快递的过程就是在事件执行中，需要判断当前响应的事件应该匹配到被代理元素中的哪一个或者哪几个。

一、事件冒泡

在JavaScript编程中，事件代理（Event Delegation）是一种将事件监听器应用于一个父元素，而不是直接应用于每一个子元素的技术。这种方法可以提高性能，尤其是在处理大量元素时。本文将详细介绍事件代理的概念、原理、使用场景、代码示例以及注意事项。

所以在了解事件代理之前，我们需要知道什么是事件冒泡（Event Bubbling）。

当一个事件在DOM元素上触发时，它会首先在该元素上触发，然后逐级向上传播到文档的根元素。这个过程就是事件冒泡。

事件传播分成三个阶段：

捕获阶段：从window对象传导到目标节点（上层传到底层）称为“捕获阶段”（capture phase），捕获阶段不会响应任何事件；
目标阶段：在目标节点上触发，称为“目标阶段”
冒泡阶段：从目标节点传导回window对象（从底层传回上层），称为“冒泡阶段”（bubbling phase）。事件代理即是利用事件冒泡的机制把里层所需要响应的事件绑定到外层；

事件代理利用了事件冒泡的原理。通过在父元素上设置监听器，可以捕获到在其子元素上触发的事件。因为事件会从子元素冒泡到父元素，所以父元素上的监听器可以处理这些事件。

优点

减少内存消耗：不需要为每个子元素分别添加事件监听器。
提高性能：特别是在动态生成的元素上，不需要为新元素重新绑定事件。
简化代码：统一处理事件，代码更简洁。

我们通过代码来看看优点：可以大量节省内存占用，减少事件注册，比如在ul上代理所有li的click事件。

<ul id="myList">
    <li>列表项 1</li>
    <li>列表项 2</li>
    <li>列表项 3</li>
    <!-- 更多列表项 -->
</ul>

如上面代码所示，如果给每个li列表项都绑定一个函数，那对内存的消耗是非常大的，因此较好的解决办法就是将li元素的点击事件绑定到它的父元素ul身上，执行事件的时候再去匹配判断目标元素。

假设上述的例子中列表项li就几个，给每个列表项都绑定了事件。

但是在很多时候，需要通过 AJAX 或者用户操作动态的增加或者删除列表项li元素，那么在每一次改变的时候都需要重新给新增的元素绑定事件，给即将删去的元素解绑事件。

如果用了事件委托就没有这种麻烦了，因为事件是绑定在父层的，和目标元素的增减是没有关系的，执行到目标元素是在真正响应执行事件函数的过程中去匹配的；所以使用事件在动态绑定事件的情况下是可以减少很多重复工作的。

缺点

事件类型限制：只能捕获冒泡的事件，不能捕获不冒泡的事件。
事件对象处理：需要通过事件对象的属性来确定事件的真正来源。

二、代码实现

2.1 JavaScript原生实现

<ul id="myLinks">
  <li id="goSomewhere">Go somewhere</li>
  <li id="doSomething">Do something</li>
  <li id="sayHi">Say hi</li>
</ul>

需要像下面这样为它们添加 3 个事件处理程序：

    var item1 = document.getElementById("goSomewhere");
    var item2 = document.getElementById("doSomething");
    var item3 = document.getElementById("sayHi");
 
    item1.onclick = function() {
      location.href = "http://www.baidu.com";
    };
    item2.onclick = function() {
      document.title = "事件委托";
    };
    item3.onclick = function() {
      alert("hi");
    };

如果在一个复杂的 Web 应用程序中，对所有可单击的元素都采用这种方式，那么结果就会有数不清的代码用于添加事件处理程序。

此时，可以利用事件委托技术解决这个问题。

使用事件委托，只需在 DOM 树中尽量最高的层次上添加一个事件处理程序，如下所示：

    var item1 = document.getElementById("goSomewhere");
    var item2 = document.getElementById("doSomething");
    var item3 = document.getElementById("sayHi");
 
    document.addEventListener("click", function (event) {
      var target = event.target;
      switch (target.id) {
        case "doSomething":
          document.title = "事件委托";
          break;
        case "goSomewhere":
          location.href = "http://www.baidu.com";
          break;
        case "sayHi": alert("hi");
          break;
      }
    })

或者代码：

document.getElementById('myList').addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
        console.log('你点击了：', event.target.textContent);
    }
});

2.2 jQuery事件delegate()实现

delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。

格式：$(selector).delegate(childSelector, event, data, function)

childSelector：必需，规定要附加事件处理程序的一个或多个子元素。 event：必需，规定附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。 data：可选，规定传递到函数的额外数据。 function：必需，规定当事件发生时运行的函数。

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
</head>
 
<body>
  <ul id="myLinks">
    <li id="goSomewhere">Go somewhere</li>
    <li id="doSomething">Do something</li>
    <li id="sayHi">Say hi</li>
  </ul>
 
  <script>
    $(document).ready(function () {
      $("#myLinks").delegate("#goSomewhere", "click", function () {
        location.href = "http://www.baidu.com";
      });
    });
  </script>
 
</body>
 
</html>

2.3 动态添加元素

function addItem() {
    var newItem = document.createElement('li');
    newItem.textContent = '新列表项';
    document.getElementById('myList').appendChild(newItem);
}

// 即使使用事件代理，新添加的列表项也会有点击事件
addItem();

三、实战案例解析

假设我们有一个图片库，用户点击任何图片时，需要显示图片的描述：

<div id="gallery">
    <img src="image1.jpg" alt="图片1" title="这是图片1的描述">
    <img src="image2.jpg" alt="图片2" title="这是图片2的描述">
    <!-- 更多图片 -->
</div>

使用事件代理，我们可以这样实现：

document.getElementById('gallery').addEventListener('click', function(event) {
    if (event.target.tagName === 'IMG') {
        alert(event.target.title);
    }
});