活动代表团与jQuery-js教程-PHP中文网

Event Delegation with jQuery

核心要点

jQuery中的事件委托是一种将单个事件处理程序附加到父元素而不是附加到各个元素的多个处理程序的技术，从而减少内存使用并提高性能。
jQuery函数on()可用于实现事件委托，可选的第二个参数指定委托事件处理程序的选择器。然后使用event.target属性来识别哪个元素触发了事件。
在动态应用程序中，元素经常添加或删除，事件委托特别有用，因为它无需手动管理事件，并降低了代码复杂性。但是，需要注意的是，子事件处理程序在委托事件处理程序之前处理，并可能阻止事件传播。

jQuery简化了JavaScript中的事件处理。但是，定义的事件处理程序越多，使用的内存就越多，这最终会导致性能下降并使UI变慢。本文探讨了事件委托如何帮助防止这种情况，以及如何在jQuery中应用事件委托。事件委托是一种事件处理技术，它不是将事件处理程序直接附加到要监听事件的每个元素上，而是将单个事件处理程序附加到这些元素的父元素上以监听在其子元素上发生的事件。处理事件时，检查哪个元素触发了事件，并相应地做出响应。事件委托依赖于DOM中的事件冒泡。这是在子元素上触发的事件向上传播到DOM树到其父元素及其父元素的父元素等，直到到达文档的过程。程序员可以使用event.stopPropagation()停止冒泡。请注意，并非所有DOM事件都会传播——focus、blur、load和unload不会。事件委托使用更少的内存，因为您用单个事件处理程序替换了多个事件处理程序。例如，如果您将事件处理程序附加到十个链接列表中的每个链接，则将有十个事件处理程序占用内存空间。相反，如果您使用事件委托并在父元素处处理事件，则只会创建一个事件处理程序，并且使用的内存少于单独附加到每个链接的内存。除了减少内存消耗外，事件委托还具有以下优点：

无需在将元素添加到DOM或从DOM中删除元素时手动管理事件。如果我们使用传统的事件处理，则必须将事件处理程序附加到添加到DOM的元素，并从从DOM中删除的元素中删除事件处理程序。
通过更少的事件处理函数来减少要管理的代码。这可以使我们的代码更简单，没有任何重复的事件处理逻辑，这有助于保持我们的JavaScript简洁和DRY。

jQuery中事件委托示例

假设您正在开发一个销售小猫图片的单页应用程序。页面加载时，将显示前20只小猫。当用户向下滚动页面时，将加载更多小猫。我们的HTML如下所示：

<div id="cats">
  <ul>
    <li>
      <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/"  class="lazy" alt=""/>
      <a href="https://www.php.cn/link/207f170979dd72ff5776e20d07c28732">More info</a>
      <button>Add to cart</button>
    </li>
    ...
  </ul>
</div>

登录后复制

使用传统的事件处理，我们需要将事件处理程序连接到：

当用户单击缩略图时显示更大的图片。
当用户单击“更多信息”链接时显示更多信息。
当用户单击“添加到购物车”时将图片添加到购物车。
将这三个事件附加到用户向下滚动页面时添加的新DOM元素。

此代码将类似于以下示例。请注意，这是旨在显示将事件处理程序附加到各个元素与使用事件委托的不同之处，因此没有为loadImage()、moreInfo()、addToCart()和loadNewKittens()函数提供任何实现。

$(document).ready(function() {
  var cats = $('#cats');

  cats.find('img')
    .on('click', function() {
      loadImage();
    })

  cats.find('a')
    .on('click', function(event) {
      event.preventDefault();
      moreInfo();
    });

  cats.find('button')
    .on('click', function() {
      addToCart();
    });

  $(window).scroll(function() {
    var fragment = loadNewKittens();
    // 为新的DOM元素附加事件处理程序
    fragment.find('img')
      .on('click', function() {
        loadImage();
      });

    fragment.find('a')
      .on('click', function(event) {
        event.preventDefault();
        moreInfo();
      });

    fragment.find('button')
      .on('click', function() {
        addToCart();
      });

    fragment.appendTo('#cats ul');
  });
});

登录后复制

代码量相当多。现在让我们看看如果使用事件委托，我们的代码是什么样子：

$(document).ready(function() {
  $('#cats')
    .on('click', 'img, a, button', function(event) {
      event.preventDefault();
      var target = event.target;

      switch(target.tagName.toLowerCase()) {
        case 'img':
          loadImage();
          break;
        case 'a':
          moreInfo();
          break;
        case 'button':
          addToCart();
          break;
        default:
          // 什么也不做
      }
    });

  $(window).scroll(function() {
    var fragment = loadNewKittens();
    fragment.appendTo('#cats ul');
  });
});

登录后复制

关键在于on()的可选第二个参数。通过在此处传递选择器，on()知道它正在处理委托事件处理程序而不是直接绑定的事件处理程序。我们的事件处理代码现在也简单多了。通过获取event.target并根据其tagName进行切换，我们可以判断哪个元素触发了事件，并可以做出相应的响应。此外，我们不再需要为在$(window).scroll中加载的元素附加事件处理程序，因为这些新元素触发的事件被委托给父元素。使用事件委托时需要注意的一个潜在“陷阱”是，附加到子元素的任何事件处理程序都在委托事件处理程序触发之前处理。因此，子事件处理程序可能会调用event.stopPropagation()或返回false，这将阻止事件冒泡到委托事件处理程序，并让您百思不得其解为什么您的事件没有被委托。

结论

在本文中，我们研究了事件委托。我们已经看到它如何通过减轻它必须承受的事件处理负载来帮助提高网站的性能。我们还看到了如何通过on()函数在jQuery中实现事件委托。

关于jQuery事件委托的常见问题

什么是jQuery中的事件委托，为什么它很重要？

jQuery中的事件委托是一种允许您将单个事件侦听器附加到父元素的技术，该侦听器将为所有匹配选择器的后代触发，无论这些后代现在是否存在还是将来添加。这很重要，因为它可以通过减少应用程序所需的事件处理程序数量来大大提高性能。您可以将事件委托给父元素，而不是将各个事件处理程序附加到每个元素。这在动态添加或删除元素的动态应用程序中特别有用。