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

Question

在标准网页上，您有数百（或数千）个 DOM 节点。在构建单页应用程序（或基于 angular/react/polymer 的项目）时，几乎每个 link 或按钮都已经被框架使用自定义事件点击劫持，将 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 周期或更少的内存或两者兼而有之。

Answer 1

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

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

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

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

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

Is setting a Javascript event on the whole document worse than multiple individual events?

javascript

angularjs

html

dom