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

Answer 2

您应该将单个侦听器绑定到项的容器，这是一种称为事件委派的技术。这是有效的，因为在javascript事件中通过所有节点的父节点向上冒泡到根节点。当您捕获事件时，您需要进行快速检查以确保点击是您要收听的节点类型之一。

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

2 个答案: