添加大量事件偵聽器的正確方法

Question

我經常在我的站點中添加一堆事件偵聽器-標題菜單，側邊欄菜單，一些按鈕，某些切換按鈕等。到項目結束時，頁面上可能會有一大堆事件偵聽器在運行。

我總是做這種事情：

// all of our menu items
var menuItems = document.querySelectorAll('.primary-nav a');

// loop over them
_.each (menuItems, function(item){
    // add event listener to each
    item.addEventListener('click', function(){
        console.log(item);
    });
});

因此，在給定的站點上，我可能有4-5個此類區塊。 將所有這些偵聽器都放在外面更好還是在文檔上偵聽並采用某種類/屬性過濾更好？

像這樣：

document.addEventListener('click', function(e){
    if ( e.target.closest('li').classList.contains('primary-nav') ) {
        // We have a primary nav item, do something with it
    }

    if ( e.target.closest('li').classList.contains('mobile-menu-toggle')) {
        // function for toggling open the mobile menu
    }
}); 

咨詢非常歡迎！

Answer 1

這取決於。 您的第一個示例具有更高的性能，並且以非常干凈的方式僅執行您要求的操作。 如果您希望DOM的結構發生變化，但又不想重新添加事件偵聽器，那么第二個示例（如其他人所說，它是不完整的-沒有“最接近”的方法）可能更有效。

如果您希望添加新的primary-nav或mobile-menu-toggle ，則擁有一個root偵聽器將意味着即使添加/刪除元素也無需更改任何偵聽器。 諸如JQuery之類的框架允許使用以下語法進行此類操作：

$('body').on('click', '.primary-nav', () => {
  ..
});

類似地，偵聽器被添加到body ，但僅響應.primary-nav選擇器匹配器。 請記住，僅應根據頁面的動態性質在合理的情況下使用此功能； 否則，“點擊”監聽器在大頁面上會變得非常復雜。