在巨大的名單上的JavaScript事件綁定性能

Question

最近我被問及一個頁面上有10K +項目，你將如何去傾聽每個項目上的點擊事件。我告訴他，我只是將一個點擊綁定到每個項目，但看着他的臉，我可以告訴他這不是他正在尋找的答案。我很難找到任何有關這種用例的在線文章，這就是爲什麼我沒有在SO上提出這個問題。如果您可以提供一些示例代碼和答案來幫助說明解決方案，那將會很有幫助。

Answer 1

你可以使用事件代表團做到這一點...

var handleClick = function(e) { 
    // Older IEs set the `event` globally. 
    e = window.event || e; 

    // Older IEs use `srcElement` instead of the spec'd `target`. 
    var target = e.target || e.srcElement; 

    // For example's sake. 
    if (target.tagName.toLowerCase() == 'a' && target.className == 'some_class') { 
     // Handle this click. 
    } 

} 

if (document.addEventListener) { 
    document.addEventListener('click', handleClick, false); 
} else (document.attachEvent) { 
    // Older IEs use `attachEvent` instead for adding event listeners. 
    document.attachEvent('onclick', handleClick); 
} else { 
    // When all else fails, let's take a journey back to the 90's. 
    document.onclick = handleClick; 
} 

事件委託作品通過捕捉其通過默認情況下所有祖先元素冒泡事件。

您可以（也應該）用最接近的一致的祖先元素替換document。

上面的代碼示例將支持您可能關心的所有瀏覽器。

如果使用庫如jQuery，代碼一般比較簡潔是...

$(document).on('click', 'a.some_class', function() { 
    // Handle this click. 
}); 

Answer 2

你應該一個監聽器綁定的物品的容器，被稱爲事件代理技術。這是有效的，因爲在JavaScript中，事件通過所有節點的父節點向上冒泡到根節點。當你捕捉到事件時，你需要做一個快速檢查，確保點擊是在你想要聽的節點類型之一上。