活動代表團與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中文網其他相關文章！