類上的Javascript事件處理程序-它們的效率如何？

Question

我曾經在AJAX創建給定類的每個元素時為其分配一個單獨的事件處理程序，如下所示：

$('#newId').on('click', function (e) {...

我已更改為該類具有一個適用於所有元素的處理程序，如下所示：

$('#container').on('click', '.myClass', function (e) {...

我一直在想，當處理程序被觸發時，它到底是如何工作的，以及對性能的影響。 進一步來說，...

元素究竟如何找到類處理程序？ 這比每個元素只有一個處理程序慢嗎？ 確實，該類只有一個事件處理程序，還是以某種方式為該類中的每個元素復制了該事件處理程序？

Answer 1

正如評論中提到的，每種方法都有其優點和缺點。

當您有一個帶有來回子元素的容器時，事件委托通常是很好的。 考慮帶有編輯/刪除按鈕的大型無序列表。 單擊刪除按鈕后，您很有可能會刪除其父級li。 如果沒有事件委托，您將負責解除綁定在那些元素上的所有事件處理程序的綁定。

事件委托使用DOM的事件冒泡屬性。 當在#container的子級上觸發click事件時，該事件將在節點樹中冒泡，並一直搜索該事件的處理程序。 然后測試事件目標以查看其是否與選擇器匹配。 如果是這樣，則將調用綁定的單擊處理程序。 沒有jQuery，這可能看起來像...

function myclass_click_handler() {
    // an element with myClass has been called
}

document.getElementById('container').addEventListener('click', function(e) {
    if (e.target.className.indexOf('myClass') > -1) {
        myclass_click_handler();
    }
});

事件委托的缺點之一是，它不適用於所有事件。 從性能的角度來看，它實際上可以提高性能，因為內存泄漏的機會更少。

當直接將回調分配給基於類的元素時，每個元素都會獲得對您的回調函數的引用。 如果隨后需要刪除任何數量的這些元素，則需要取消綁定這些元素的事件處理程序。 當您使用remove（）方法通過刪除綁定事件處理程序時，jQuery會對此提供幫助。

希望這可以幫助！