在整个文档上设置 Javascript 事件是否比多个单个事件更糟糕？答案

【问题标题】：Is setting a Javascript event on the whole document worse than multiple individual events?在整个文档上设置 Javascript 事件是否比多个单个事件更糟糕？
【发布时间】：2015-05-10 03:51:54
【问题描述】：

在标准网页上，您有数百（或数千）个 DOMNode。在构建单页应用程序（或基于 angular/react/polymer 的项目）时，几乎每个链接或按钮都已被框架使用自定义事件来单击劫持，以将 DOMElement 绑定到处理程序函数。

那么，既然您可以通过bind the whole document 来处理点击事件（然后检查event.target），那会是一种更高效的方式来侦听大量事件吗？

还是设置几十个click 处理程序更好？

function report(event) {
    console.log(event.target, event);
    return false; // You would only want to return false if you actually wanted to intercept this event (and the user wasn't pressing ctrl/cmd+click).
}

document
    .addEventListener('click', report, true);

// vs
document.querySelector('.a')
    .addEventListener('click', report, true);
document.querySelector('.b')
    .addEventListener('click', report, true);
document.querySelector('.c')
    .addEventListener('click', report, true);

更高的性能意味着更少的 CPU 周期或更少的内存或两者兼而有之。

【问题讨论】：

这绝对是“更好”，对于“更好”的某些值......但说真的，您不一定需要添加大量样板代码才能使其工作。您可以定义几个通用事件帮助函数，通过一个通用文档级单击处理程序将事件映射到适当的回调。有时在元素级别绑定肯定更容易，特别是如果您计划有时取消甚至传播等。
无法回答
@happy，为什么不呢？在我花了几个小时搭建一个包含数百个元素的测试页面并测试跨多个浏览器的性能之前，我只是想知道这个理论的答案。
根据我的经验，情况正好相反：附加一个大的顶级事件处理程序往往比每个元素的处理程序消耗更少的内存。速度方面我没有注意到差异。这是在具有数千个可点击节点（家谱）的应用程序上
@Xeoncross 因为它需要解释。甚至您的实验结果也会受到解释。伊莫

标签： javascript angularjs html dom

【解决方案1】：

绑定到文档（称为事件委托）更好的原因有多种：

内存中的事件处理程序实例较少。如果您有大量的项目，这将节省内存
删除元素时未正确注销的事件处理程序发生内存泄漏的可能性较小
每次添加应响应事件处理程序的类型的新元素时，需要进行的工作更少 - 因此 CPU 使用率更低

根据应用程序，委托的事件处理程序可能需要做更多的工作来弄清楚如何为每个单独的实例正确处理事件，而单独的处理程序可以使用范围来存储值以供在处理程序本身内部使用 -这可能会更快。

所以答案取决于您的应用程序

【讨论】：