DOM事件委託的定義與解釋

Question

有人能否請解釋一下JavaScript中的事件委託，以及它的作用是什麼？

Answer 1

DOM事件委託是一種透過單一共同的父元素而不是每個子元素來回應UI事件的機制，透過事件「冒泡」（也稱為事件傳播）的魔力來實現。

當在一個元素上觸發事件時，會發生以下情況：

事件冒泡為瀏覽器中的事件委託提供了基礎。現在，您可以將事件處理程序綁定到單一父元素，並且每當事件發生在其任何子節點上時，該處理程序將執行（以及它們的子節點）。 這就是事件委託。 以下是它的實際範例：

<ul onclick="alert(event.type + '!')">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

在這個範例中，如果您點擊任何一個子<li>節點，您將看到一個"click!"的警告，即使沒有將 <li>上的點擊處理程序綁定。如果我們將onclick="..."綁定到每個<li>上，您將得到相同的效果。

那麼好處是什麼？

假設您現在需要透過DOM操作動態新增新的<li>項目到上述清單：

var newLi = document.createElement('li');
newLi.innerHTML = 'Four';
myUL.appendChild(newLi);

如果不使用事件委託，您將不得不重新綁定"onclick"事件處理程序到新的<li>元素上，以使其與其兄弟元素表現相同。使用事件委託，您不需要做任何事情。只需將新的<li>新增到清單中，完成。

這對於綁定到許多元素的事件處理程序的網頁應用程式非常好，其中新元素在DOM中動態建立和/或刪除。透過事件委託，事件綁定的數量可以大大減少，將它們移到一個共同的父元素中，並且動態創建元素的程式碼可以與綁定它們的事件處理程序的邏輯解耦。

事件委託的另一個好處是事件監聽器使用的總記憶體佔用量減少（因為事件綁定的數量減少）。對於經常卸載的小頁面（即使用者經常導航到不同頁面），這可能沒有太大的影響。但對於長期存在的應用程式來說，它可能是重要的。有一些非常難以追蹤的情況，當從DOM中刪除元素時，它們仍然佔用記憶體（即它們洩漏），而且通常這種洩漏的記憶體與事件綁定有關。使用事件委託，您可以自由地銷毀子元素，而不必擔心忘記「解綁」它們的事件監聽器（因為監聽器在祖先元素上）。這些類型的記憶體洩漏可以被包含（如果不是完全消除，有時真的很難做到。IE，我在看著你）。

以下是一些更好的事件委託的具體程式碼範例：

• JavaScript事件委託的工作原理
• 事件委託與事件處理的比較
• jQuery.delegate是事件委託 選擇器規格
• jQuery.on在第二個參數傳遞選擇器時使用事件委託
• 無JavaScript函式庫的事件委託
• 閉包與事件委託：看一下不將程式碼轉換為使用事件委託的優點
• PPK發現的一個有趣方法委託focus和blur事件（不會冒泡）