JavaScript事件委派比您想像的要容易-js教程-PHP中文網

事件委託通過事件冒泡和目標元素來工作。當觸發事件時，它也會激活所有元素的祖先，這一過程稱為事件冒泡。目標元素是事件的起源元素，存儲在事件對象的屬性中，使您可以確定事件的起源。

，事件授權提高性能並減少記憶使用情況，並非所有事件泡泡，並且處理某些鼠標事件可能會成為性能botterneck。因此，仔細管理您的活動委託代碼以避免這些潛在問題很重要。

如果您要在網頁上添加一些JavaScript互動性，您可能聽說過JavaScript事件委託委託，並且認為這是那些累積的硬核設計模式之一。事實是，如果您已經知道如何添加JavaScript事件處理程序，那是實現的快照。

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

它如何工作？

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

它將如何幫助我？

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

代碼中的外觀是什麼？

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

函數geteventTarget（e）{e = e || window.event;返回e.target || E.Srcelement; }

登入後複製

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

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

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

登入後複製

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

哪些優點和缺點是什麼？

JavaScript事件委派的好處是：

較少的事件處理程序需要設置和居住在內存中。這是大的；
dom更新後，無需重新使用操作人員。 If your page content is generated dynamically, via Ajax for example, you don't need to add and remove event handlers as elements are loaded or unloaded.

The potential problems may be less clear, but once you are aware of them they're easily avoided:

There's a risk your event management code could become a performance bottleneck, so keep it as lean as possible.
Not all events bubble.模糊，焦點，加載和卸載事件不會像其他事件那樣冒泡。實際上，可以使用捕獲階段（在IE以外的瀏覽器中）而不是冒泡階段訪問模糊和焦點事件，但這是另一天的故事。
在管理某些鼠標事件時，您需要謹慎。如果您的代碼正在處理Mousemove事件，則您有很大的風險可能會創建性能瓶頸，因為Mousemove事件經常觸發。 Mouseout事件具有一個古怪的行為，很難通過事件委託進行管理。

摘要

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

事件委託是一種方便的工具，可以在您的套件中使用並且易於實現。

關於JavaScript事件委託

經常詢問的問題

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

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

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

可以將事件委託與JavaScript中的任何事件一起使用？

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

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

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

在JavaScript中，事件委託和事件綁定之間有什麼區別？

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

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

是的，事件委託的主要好處之一是它可以與動態添加的元素一起使用。 Since the event listener is attached to a parent element, it can handle events for child elements that are added to the DOM after the listener is attached.

How can I use event delegation with the 'this' keyword in JavaScript?

When using event delegation, the 'this' keyword inside the event handler refers to the element to which the event listener is attached, not the element that triggered the event.為了參考觸發事件的元素，您可以使用事件對象的“目標”屬性。