核心要點(diǎn)

• jQuery中的事件委託是一種將單個(gè)事件處理程序附加到父元素而不是附加到各個(gè)元素的多個(gè)處理程序的技術(shù)，從而減少內(nèi)存使用並提高性能。
• jQuery函數(shù)on()可用於實(shí)現(xiàn)事件委託，可選的第二個(gè)參數(shù)指定委託事件處理程序的選擇器。然後使用event.target屬性來(lái)識(shí)別哪個(gè)元素觸發(fā)了事件。
• 在動(dòng)態(tài)應(yīng)用程序中，元素經(jīng)常添加或刪除，事件委託特別有用，因?yàn)樗鼰o(wú)需手動(dòng)管理事件，並降低了代碼複雜性。但是，需要注意的是，子事件處理程序在委託事件處理程序之前處理，並可能阻止事件傳播。

jQuery簡(jiǎn)化了JavaScript中的事件處理。但是，定義的事件處理程序越多，使用的內(nèi)存就越多，這最終會(huì)導(dǎo)致性能下降並使UI變慢。本文探討了事件委託如何幫助防止這種情況，以及如何在jQuery中應(yīng)用事件委託。事件委託是一種事件處理技術(shù)，它不是將事件處理程序直接附加到要監(jiān)聽事件的每個(gè)元素上，而是將單個(gè)事件處理程序附加到這些元素的父元素上以監(jiān)聽在其子元素上發(fā)生的事件。處理事件時(shí)，檢查哪個(gè)元素觸發(fā)了事件，並相應(yīng)地做出響應(yīng)。事件委託依賴於DOM中的事件冒泡。這是在子元素上觸發(fā)的事件向上傳播到DOM樹到其父元素及其父元素的父元素等，直到到達(dá)文檔的過(guò)程。程序員可以使用event.stopPropagation()停止冒泡。請(qǐng)注意，並非所有DOM事件都會(huì)傳播——focus、blur、load和unload不會(huì)。事件委託使用更少的內(nèi)存，因?yàn)槟脝蝹€(gè)事件處理程序替換了多個(gè)事件處理程序。例如，如果您將事件處理程序附加到十個(gè)鏈接列表中的每個(gè)鏈接，則將有十個(gè)事件處理程序佔(zhàn)用內(nèi)存空間。相反，如果您使用事件委託並在父元素處處理事件，則只會(huì)創(chuàng)建一個(gè)事件處理程序，並且使用的內(nèi)存少於單獨(dú)附加到每個(gè)鏈接的內(nèi)存。除了減少內(nèi)存消耗外，事件委託還具有以下優(yōu)點(diǎn)：

• 無(wú)需在將元素添加到DOM或從DOM中刪除元素時(shí)手動(dòng)管理事件。如果我們使用傳統(tǒng)的事件處理，則必須將事件處理程序附加到添加到DOM的元素，並從從DOM中刪除的元素中刪除事件處理程序。
• 通過(guò)更少的事件處理函數(shù)來(lái)減少要管理的代碼。這可以使我們的代碼更簡(jiǎn)單，沒有任何重複的事件處理邏輯，這有助於保持我們的JavaScript簡(jiǎn)潔和DRY。

jQuery中事件委託示例

假設(shè)您正在開發(fā)一個(gè)銷售小貓圖片的單頁(yè)應(yīng)用程序。頁(yè)面加載時(shí)，將顯示前20隻小貓。當(dāng)用戶向下滾動(dòng)頁(yè)面時(shí)，將加載更多小貓。我們的HTML如下所示：

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

使用傳統(tǒng)的事件處理，我們需要將事件處理程序連接到：

1. 當(dāng)用戶單擊縮略圖時(shí)顯示更大的圖片。
2. 當(dāng)用戶單擊“更多信息”鏈接時(shí)顯示更多信息。
3. 當(dāng)用戶單擊“添加到購(gòu)物車”時(shí)將圖片添加到購(gòu)物車。
4. 將這三個(gè)事件附加到用戶向下滾動(dòng)頁(yè)面時(shí)添加的新DOM元素。

此代碼將類似於以下示例。請(qǐng)注意，這是旨在顯示將事件處理程序附加到各個(gè)元素與使用事件委託的不同之處，因此沒有為loadImage()、moreInfo()、addToCart()和loadNewKittens()函數(shù)提供任何實(shí)現(xiàn)。

$(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');
  });
});

代碼量相當(dāng)多。現(xiàn)在讓我們看看如果使用事件委託，我們的代碼是什麼樣子：

$(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');
  });
});

關(guān)鍵在於on()的可選第二個(gè)參數(shù)。通過(guò)在此處傳遞選擇器，on()知道它正在處理委託事件處理程序而不是直接綁定的事件處理程序。我們的事件處理代碼現(xiàn)在也簡(jiǎn)單多了。通過(guò)獲取event.target並根據(jù)其tagName進(jìn)行切換，我們可以判斷哪個(gè)元素觸發(fā)了事件，並可以做出相應(yīng)的響應(yīng)。此外，我們不再需要為在$(window).scroll中加載的元素附加事件處理程序，因?yàn)檫@些新元素觸發(fā)的事件被委託給父元素。使用事件委託時(shí)需要注意的一個(gè)潛在“陷阱”是，附加到子元素的任何事件處理程序都在委託事件處理程序觸發(fā)之前處理。因此，子事件處理程序可能會(huì)調(diào)用event.stopPropagation()或返回false，這將阻止事件冒泡到委託事件處理程序，並讓您百思不得其解為什麼您的事件沒有被委託。

結(jié)論

在本文中，我們研究了事件委託。我們已經(jīng)看到它如何通過(guò)減輕它必須承受的事件處理負(fù)載來(lái)幫助提高網(wǎng)站的性能。我們還看到瞭如何通過(guò)on()函數(shù)在jQuery中實(shí)現(xiàn)事件委託。

關(guān)於jQuery事件委託的常見問(wèn)題

什麼是jQuery中的事件委託，為什麼它很重要？

jQuery中的事件委託是一種允許您將單個(gè)事件偵聽器附加到父元素的技術(shù)，該偵聽器將為所有匹配選擇器的後代觸發(fā)，無(wú)論這些後代現(xiàn)在是否存在還是將來(lái)添加。這很重要，因?yàn)樗梢酝ㄟ^(guò)減少應(yīng)用程序所需的事件處理程序數(shù)量來(lái)大大提高性能。您可以將事件委託給父元素，而不是將各個(gè)事件處理程序附加到每個(gè)元素。這在動(dòng)態(tài)添加或刪除元素的動(dòng)態(tài)應(yīng)用程序中特別有用。

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

jQuery中的事件委託利用大多數(shù)jQuery事件都會(huì)冒泡或向上傳播到DOM樹這一事實(shí)。當(dāng)在子元素上觸發(fā)事件時(shí)，它將冒泡到其父元素。通過(guò)將事件偵聽器附加到父元素，您可以捕獲在其任何子元素上觸發(fā)的事件。 event.target屬性可用於確定哪個(gè)子元素觸發(fā)了事件。

jQuery中直接事件和委託事件有什麼區(qū)別？

直接事件直接附加到特定元素，只有這些元素才能觸發(fā)事件。另一方面，委託事件附加到父元素，任何子元素都可以觸發(fā)事件。委託事件的優(yōu)點(diǎn)是可以處理動(dòng)態(tài)添加的子元素的事件。

如何在jQuery中使用.on()方法進(jìn)行事件委託？

jQuery中的.on()方法用於附加事件處理程序。對(duì)於事件委託，您將使用三個(gè)參數(shù)：事件類型、用於篩選後代的選擇器字符串和處理程序函數(shù)。事件類型是一個(gè)表示事件類型的字符串（例如，“click”），選擇器字符串用於篩選觸發(fā)事件的所選元素的後代，處理程序函數(shù)是在觸發(fā)事件時(shí)要執(zhí)行的函數(shù)。

我可以在jQuery中使用事件委託處理動(dòng)態(tài)添加的元素嗎？

是的，jQuery中事件委託的主要優(yōu)點(diǎn)之一是它可以處理動(dòng)態(tài)添加的元素的事件。由於事件偵聽器附加到父元素，因此它可以捕獲在其任何子元素上觸發(fā)的事件，即使這些事件是在附加事件偵聽器之後添加的。

什麼是事件冒泡，它與jQuery中的事件委託有什麼關(guān)係？

事件冒泡是一種事件傳播類型，其中事件從觸發(fā)它的特定元素開始，然後冒泡到其祖先。 jQuery中的事件委託利用事件冒泡，將事件偵聽器附加到父元素。當(dāng)在子元素上觸發(fā)事件時(shí)，它將冒泡到父元素，事件偵聽器可以在此處捕獲它。

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

您可以使用.stopPropagation()方法在jQuery中停止事件傳播。此方法可防止事件冒泡到DOM樹，從而防止任何父處理程序收到事件通知。但是，應(yīng)謹(jǐn)慎使用它，因?yàn)樗鼤?huì)使您的代碼更難調(diào)試和理解。

jQuery中用於事件處理的.bind()和.on()方法有什麼區(qū)別？

jQuery中的.bind()方法用於將事件處理程序直接附加到元素。另一方面，.on()方法可用於將事件處理程序直接附加到元素（如.bind()）或附加到父元素以進(jìn)行事件委託。 .on()方法更通用，是jQuery中附加事件處理程序的首選方法。

我可以在jQuery中使用事件委託處理自定義事件嗎？

是的，您可以在jQuery中使用事件委託處理自定義事件。與標(biāo)準(zhǔn)事件一樣，您可以將事件偵聽器附加到父元素，該偵聽器將捕獲在其任何子元素上觸發(fā)的自定義事件。

如何在jQuery中刪除事件處理程序？

您可以使用.off()方法在jQuery中刪除事件處理程序。此方法可用於刪除元素上的所有事件處理程序，或僅刪除附加有特定事件類型或命名空間的事件處理程序。

以上是活動(dòng)代表團(tuán)與jQuery的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！