使用通用 document.addEventListener(“click”,f) 偵聽器是否比特定用途更慢或更弱？

Question

我的代碼是這樣的：

document.addEventListener('click', function(ev){
  if(ev.path[0].className == 'linkTogether'){//do something}
  if(ev.path[0].id == "createNewPage"){//do something}
});

對於動態創建的按鈕和節點來說，這實際上運行良好，但感覺有些不對勁。 所以我想知道這是否是最佳實踐，或者是否有更好的方法將事件偵聽器添加到動態創建的元素。

謝謝，傑克

Answer 1

在有大量對象以相同方式運行的特定情況下，您可以使用此技術（向其父項添加事件偵聽器）來提高腳本的性能。

但是，在一般頁面中，您只需要訪問許多不同的對象並遍歷所有對象以檢查您單擊的哪個不是更快。

這是一篇關於您所指的技術的文章-事件委托。

Answer 2

這是創建適用於動態添加元素的事件偵聽器的正確模式。 它本質上與 jQuery 的事件委托方法（例如.on ）使用的方法.on 。

但是，它確實有性能影響。 每次單擊文檔中的任意位置時，代碼都會運行，並且必須遍歷您需要檢查的整個事件綁定列表。 您可以通過將事件偵聽器添加到更具體的元素來改進這一點。 如果動態元素始終添加到特定 DIV 中，請將您的偵聽器添加到該 DIV 而不是document 。

這也避免了事件委托的另一個陷阱。 事件委托取決於從內部元素冒泡到其所有容器的事件。 但是，如果沿途有任何處理程序調用event.stopPropagation ，則該事件將不會生成document 。 如果將偵聽器添加到較低的元素，則不太可能發生這樣的沖突。

Answer 3

我想補充一點，如果您動態創建元素，最好在函數中包含內聯偵聽器並過濾您想要執行的操作。

<div class="form_ID1" onclick="myfunction(this, event);">
... children bubbling 
... Use if statements in caught js myFunction function.

在 myfunction 函數中，您將通過 event.target 捕獲子元素，通過 this.className 捕獲包含偵聽器的元素。

但是，在某些情況下，您需要一個通用（文檔）單擊事件。 例如，當您在彈出窗口之外單擊時，您需要關閉彈出窗口！！ 它就像：例如

if (clicked.className != popup.className) popup.remove()

即使在這種情況下，也可以通過在彈出窗口的父 DIV 中插入 onblur="myfunction(this); 來解決。