活动代表团与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/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  class="lazy" alt=""/>
      <a href="https://www.php.cn/link/207f170979dd72ff5776e20d07c28732">More info</a>
      <button>Add to cart</button>
    </li>
    ...
  </ul>
</div>

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

1. 当用户单击缩略图时显示更大的图片。
2. 当用户单击“更多信息”链接时显示更多信息。
3. 当用户单击“添加到购物车”时将图片添加到购物车。
4. 将这三个事件附加到用户向下滚动页面时添加的新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中的事件委托是一种允许您将单个事件侦听器附加到父元素的技术，该侦听器将为所有匹配选择器的后代触发，无论这些后代现在是否存在还是将来添加。这很重要，因为它可以通过减少应用程序所需的事件处理程序数量来大大提高性能。您可以将事件委托给父元素，而不是将各个事件处理程序附加到每个元素。这在动态添加或删除元素的动态应用程序中特别有用。

jQuery中的事件委托是如何工作的？

jQuery中的事件委托利用大多数jQuery事件都会冒泡或向上传播到DOM树这一事实。当在子元素上触发事件时，它将冒泡到其父元素。通过将事件侦听器附加到父元素，您可以捕获在其任何子元素上触发的事件。event.target属性可用于确定哪个子元素触发了事件。

jQuery中直接事件和委托事件有什么区别？

直接事件直接附加到特定元素，只有这些元素才能触发事件。另一方面，委托事件附加到父元素，任何子元素都可以触发事件。委托事件的优点是可以处理动态添加的子元素的事件。

如何在jQuery中使用.on()方法进行事件委托？

jQuery中的.on()方法用于附加事件处理程序。对于事件委托，您将使用三个参数：事件类型、用于筛选后代的选择器字符串和处理程序函数。事件类型是一个表示事件类型的字符串（例如，“click”），选择器字符串用于筛选触发事件的所选元素的后代，处理程序函数是在触发事件时要执行的函数。

我可以在jQuery中使用事件委托处理动态添加的元素吗？

是的，jQuery中事件委托的主要优点之一是它可以处理动态添加的元素的事件。由于事件侦听器附加到父元素，因此它可以捕获在其任何子元素上触发的事件，即使这些事件是在附加事件侦听器之后添加的。

什么是事件冒泡，它与jQuery中的事件委托有什么关系？

事件冒泡是一种事件传播类型，其中事件从触发它的特定元素开始，然后冒泡到其祖先。jQuery中的事件委托利用事件冒泡，将事件侦听器附加到父元素。当在子元素上触发事件时，它将冒泡到父元素，事件侦听器可以在此处捕获它。

如何在jQuery中停止事件传播？

您可以使用.stopPropagation()方法在jQuery中停止事件传播。此方法可防止事件冒泡到DOM树，从而防止任何父处理程序收到事件通知。但是，应谨慎使用它，因为它会使您的代码更难调试和理解。

jQuery中用于事件处理的.bind()和.on()方法有什么区别？

jQuery中的.bind()方法用于将事件处理程序直接附加到元素。另一方面，.on()方法可用于将事件处理程序直接附加到元素（如.bind()）或附加到父元素以进行事件委托。.on()方法更通用，是jQuery中附加事件处理程序的首选方法。

我可以在jQuery中使用事件委托处理自定义事件吗？

是的，您可以在jQuery中使用事件委托处理自定义事件。与标准事件一样，您可以将事件侦听器附加到父元素，该侦听器将捕获在其任何子元素上触发的自定义事件。

如何在jQuery中删除事件处理程序？

您可以使用.off()方法在jQuery中删除事件处理程序。此方法可用于删除元素上的所有事件处理程序，或仅删除附加有特定事件类型或命名空间的事件处理程序。

以上是活动代表团与jQuery的详细内容。更多信息请关注PHP中文网其他相关文章！