庞大列表上的javascript事件绑定(bind)性能

Question

最近我在一个包含 10K 多个项目的页面上被问到，您将如何监听每个项目的点击事件。我告诉他我会为每个项目绑定(bind)一个点击，但看着他的脸，我可以看出这不是他正在寻找的答案。我很难找到有关此类用例的任何在线文章，这就是为什么我不在 SO 上提出这个问题。如果您能提供一些示例代码和您的答案以帮助说明解决方案，将会很有帮助。

Answer 1

你可以使用事件委托(delegate)来做到这一点......

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;
}

事件委托(delegate)的工作原理是捕获默认情况下通过所有祖先元素冒泡的事件。

您可以(并且应该)将 document 替换为最接近的一致祖先元素。

上面的代码示例将支持您可能关心的所有浏览器。

如果使用 jQuery 之类的库，代码通常会更简洁...

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