核心要點(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)管理事件，并降低了代碼復(fù)雜性。但是，需要注意的是，子事件處理程序在委托事件處理程序之前處理，并可能阻止事件傳播。

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è)事件處理程序占用內(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)單，沒有任何重復(fù)的事件處理邏輯，這有助于保持我們的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://ipnx.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)多?，F(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)文章！