活動代表團與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中的事件委託是一種允許您將單個事件偵聽器附加到父元素的技術，該偵聽器將為所有匹配選擇器的後代觸發，無論這些後代現在是否存在還是將來添加。這很重要，因為它可以通過減少應用程序所需的事件處理程序數量來大大提高性能。您可以將事件委託給父元素，而不是將各個事件處理程序附加到每個元素。這在動態添加或刪除元素的動態應用程序中特別有用。