巨大的列表上的javascript事件绑定性能

Question

最近我被问到一个包含10K +项目的页面,你会如何在每个项目上收听点击事件.我告诉他我只会点击每个项目的点击,但看着他的脸,我可以说这不是他正在寻找的答案.我很难找到关于这种用例的任何在线文章,这就是为什么我不是在问这个问题.如果您能提供一些示例代码以帮助说明解决方案,那将会很有帮助.

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