JavaScript事件委派比您想像的要容易

關鍵要點

• JavaScript事件代表團是一種通過減少所需事件處理程序數量來提高性能的技術。與其將單個事件處理程序附加到每個元素上，不如將單個事件處理程序添加到父元素中，從而為其所有子元素處理事件。
• 事件委託通過事件冒泡和目標元素來工作。當觸發事件時，它也會激活所有元素的祖先，這一過程稱為事件冒泡。目標元素（事件的原始元素）存儲在事件對象的屬性中，使您可以確定事件的起源。
• 事件委託會提高性能並減少記憶使用量，但並非所有事件都泡泡，並且處理某些鼠標事件可能會成為性能瓶頸。因此，仔細管理您的事件委託代碼以避免這些潛在問題很重要。

如果您想在網頁上添加一些JavaScript交互性，您可能聽說過JavaScript事件委託，並認為這是僅硬核JavaScript程序員擔心的那些複雜的設計模式之一。事實是，如果您已經知道如何添加JavaScript事件處理程序，那將是可以實現的快照。

JavaScript事件是網頁上所有互動性的基石（我的意思是認真的互動性，而不是那些Dinky CSS下拉菜單）。在傳統活動中，您可以根據需要從每個元素中添加或刪除事件處理程序。但是，事件處理程序可能會導致內存洩漏和性能退化 - 您擁有的越多，風險就越大。 JavaScript事件委託是一種簡單的技術，您可以將單個事件處理程序添加到父元素中，以避免將事件處理程序添加到多個子元素中。

它如何工作？

事件委託使用JavaScript事件的兩個經常被忽略的功能：事件冒泡和目標元素。當事件在元素上觸發時，例如鼠標單擊按鈕，也會在該元素的所有祖先上觸發同一事件。這個過程稱為事件冒泡。事件從原始元素到達DOM樹的頂部起泡。任何事件的目標元素是原始元素，我們的示例中的按鈕，並存儲在事件對象的屬性中。使用事件授權，可以將事件處理程序添加到元素中，等待事件從子元素中彈起，並輕鬆確定事件發起的元素。

它將如何幫助我？

想像一下，當用戶單擊表單元時，帶有10列和100行的HTML表，其中您希望發生某些事情。例如，我曾經必須在單擊時將大小可編輯的表的每個單元格製作。將事件處理程序添加到1000個單元格中的每個單元格中，這是一個主要的性能問題，並且可能是瀏覽器磨損內存洩漏的來源。取而代之的是，使用事件委託，您只需在表元素中添加一個事件處理程序，攔截單擊事件並確定單擊哪個單元格。

代碼中的外觀如何？

代碼很簡單；我們只需要擔心檢測目標元素即可。假設我們有一個帶有ID“報告”的表元素，並且我們已將一個事件處理程序添加到了單擊事件的表中，將調用Editcell函數。 Editcell函數將需要確定在表上冒泡的事件的目標元素。希望我們寫一些需要此功能的事件處理程序功能，我們將其放置在一個稱為geteventTarget的單獨函數中：

功能getEventTarget（e）{
  E = E || window.event;
  返回e.target || E.Srcelement;
}

變量e表示事件對象，我們只需要撒跨螺絲代碼即可訪問和返回目標元素，該目標元素存儲在Internet Explorer中的SRCelement屬性中，而目標屬性則存儲在其他瀏覽器中。

接下來是調用getEventTarget函數的Editcell函數。一旦我們提到了目標元素，就可以確保元素是我們期望的元素：

函數editcell（e）{
  var target = getEventTarget（e）;
  if（target.tagname.tolowercase（）==='td'）{
    //用單元做某事
  }
}

在Editcell函數中，我們確認目標元素是通過檢查其標籤名稱的表單元格。該檢查可能過度簡化；如果是事件的目標是表單元格中的另一個元素，該怎麼辦？快速修改添加代碼以查找父型TD元素。如果某些單元不應該編輯怎麼辦？在這種情況下，我們可以在非編輯單元格中添加特定的類名稱，並檢查目標元素在使其可編輯之前是否具有該類名稱值。有許多選項可用，您只需要選擇適合您應用程序的選擇即可。

什麼是利弊？

JavaScript事件的好處是：

• 事件處理程序較少需要設置，並居住在內存中。這是大的；更好的性能和崩潰的效果較小。
• DOM更新後，無需重新使用處理程序。例如，如果您的頁面內容是通過AJAX動態生成的，則無需在加載或卸載元素時添加和刪除事件處理程序。

潛在的問題可能不太清楚，但是一旦您意識到它們很容易避免：

• 您的活動管理代碼可能會成為性能瓶頸的風險，因此請盡可能保持傾斜。
• 並非所有事件都泡泡。模糊，焦點，負載和卸載事件不會像其他事件那樣冒泡。實際上，可以使用捕獲階段（在IE以外的瀏覽器中）而不是冒泡階段來訪問模糊和焦點事件，但這是另一天的故事。
• 管理某些鼠標事件時需要謹慎。如果您的代碼正在處理Mousemove事件，則您有很大的風險可能會創建性能瓶頸，因為Mousemove事件經常觸發。 MouseOut事件具有古怪的行為，在事件委託中很難管理。

概括

有JavaScript事件委託示例可使用主要庫：jQuery，Prototype和Yahoo! UI。您還可以完全沒有庫找到示例，例如從可用類型的博客中找到的示例。

事件代表團是在需要且易於實現的情況下使用的方便工具。

關於JavaScript事件代表團的常見問題

在JavaScript中使用事件委託的主要優點是什麼？

JavaScript中的事件委託是一種利用事件冒泡過程的技術。使用事件委託的主要優點是，它通過減少元素附加的事件偵聽器的數量來大大提高性能。您沒有將單個事件偵聽器附加到每個元素上，而是將單個事件偵聽器附加到父元素。然後，該聽眾處理所有子元素的事件。在處理大量類似元素（例如列表項目或表行）時，這尤其有益。

事件委託如何在JavaScript中工作？

事件委託通過利用JavaScript中的事件冒泡過程來起作用。當事件發生在子元素上時，它會通過DOM樹冒泡，在其每個父元素上觸發相同的事件。通過將事件偵聽器附加到父元素上，您可以處理其所有子元素的事件。事件對像傳遞給事件處理程序包含“目標”屬性，該屬性指的是觸發事件的實際元素。您可以使用此屬性來確定如何處理事件。

可以在JavaScript中的任何事件中使用事件委託嗎？

是的，事件委託可以與JavaScript中的任何事件一起使用。但是，並非所有事件都泡泡。例如，“焦點”和“模糊”事件並不是所有瀏覽器中的氣泡。對於這些事件，您可以使用“焦點”和“ FocusOut”事件，而“焦點”事件確實泡泡。

如何停止在JavaScript中冒泡事件？

您可以使用事件對象的“停止propapagation”方法停止在JavaScript中冒泡事件。此方法可防止事件冒泡DOM樹。但是，使用此方法時要小心，因為它可以防止其他事件處理程序觸發。

JavaScript中事件委託和事件綁定有什麼區別？

JavaScript中的事件綁定涉及將事件偵聽器直接連接到元素。此聽眾只能處理此特定元素的事件。另一方面，事件委託涉及將事件聽眾附加到父元素上，該元素處理所有子元素的事件。該技術更有效，尤其是在處理大量類似元素時。

我可以使用帶有動態添加元素的事件委託嗎？

是的，事件委託的主要好處之一是它可以與動態添加的元素一起使用。由於事件偵聽器已連接到父元素，因此可以處理附加偵聽器後添加到DOM的子元素的事件。

如何在JavaScript中使用“此”關鍵字的事件委託？

使用事件委託時，事件處理程序內部的“此”關鍵字是指隨附事件偵聽器的元素，而不是觸發事件的元素。為了參考觸發事件的元素，您可以使用事件對象的“目標”屬性。

我可以將事件代表團與jQuery一起使用嗎？

是的，jQuery提供了“ .on（）”方法，您可以用來實現事件委託。 “ .on（）”方法採用三個參數：事件類型，子元素的選擇器和事件處理程序。

使用事件代表團的性能影響是什麼？

事件代表團可以顯著提高性能，尤其是在處理大量類似元素時。通過將單個事件偵聽器附加到父元素上，您可以減少需要由瀏覽器管理的事件偵聽器的數量，這可能會導致性能的明顯改善。

我可以在JavaScript中使用事件委託與自定義事件嗎？

是的，您可以在JavaScript中使用自定義事件的事件委託。就像內置的事件一樣，自定義事件也可以在DOM樹上冒出來，使您可以使用附加到父元素的單個事件偵聽器來處理它們。

以上是JavaScript事件委派比您想像的要容易的詳細內容。更多資訊請關注PHP中文網其他相關文章！