事件委派 - 仅在顶级节点上获取所有事件是否更有效？

Question

我已经读到，在文档对象中散布着许多单独的事件处理程序，在其事件处理程序中使用 event.target 的父节点进行事件委托可能会提高性能。

我只是想知道这通常如何扩展到所有事件处理。如果您的整个应用程序位于单个父节点内 - 例如 <div id="app"></div> 单页应用程序，那么仅在此顶级节点获取所有事件是否有意义？

这会在很多情况下提高性能吗？什么时候不会？

Answer 1

想象一个有 10 列和 10 行的表格。如果为每个单元格添加一个处理程序，那么您将拥有 100 个处理程序。如果每行添加一个处理程序，您将有 10 个。如果您将一个处理程序添加到表中，那么您有 1 个。

权衡的是代码复杂性。每个单元格都有一个处理程序意味着代码非常具体，因为它与单个单元格及其内容有关。但是在表格级别，您必须隔离哪个单元格接收到事件，然后按照单个单元格执行相同的代码。

想象一下，当行接收到相同的事件时，如果您有处理程序来执行某些操作 - 现在您的代码会随着您处理不同的情况而变得更大、更复杂。

每次事件在父元素中发生时都会运行该代码，而这种额外的复杂性很快就会成为障碍。为什么要通过 10 次代码检查来运行一个用例。在更接近事件发生的位置触发事件处理程序会删除大部分额外的逻辑。

这曾经真的是个问题，因为每个表格单元格的处理程序可能会很快耗尽较大表格上的内存（我在看你的 IE6）。但是现在浏览器在这类事情上做得更好了，所以它变成了一个组织代码以提高可读性、理解性、维护性和性能的问题。（虽然性能仍然是一个因素...... )