javascript - 为什么在 jQuery 中将事件注册到文档是不好的做法？

Question

每当我读到有关 jQuery 中的事件注册的内容时，他们都说我们应该尝试将事件处理程序添加到最近的父级，并避免向文档添加事件监听器，因为根据资源，它们速度缓慢且效率低下。

但是为什么它们很慢？显然这是因为该事件必须冒泡到文档中，这需要时间。然后它将与要调用的选择器列表进行比较，例如

$(document).on("click", ".abc", function(){  })
$(document).on("click", ".abc2", function(){ })

因此，如果我单击一个元素，单击事件将冒泡到文档，然后它将匹配选择器列表(“.abc，.abc2”)......这是低效的。好的，我明白了，但是如果列表中只有一个选择器怎么办？例如

$(document).on("click", "*", function(){  }) 

会不会很慢？如果是这样为什么？

基本上我正在尝试创建一个谷歌的 jsaction 类似库，所以我会这样写:-

$(document).on("click", "[jsaction]", function(){  })

因为这将是唯一的选择器，所以我认为它不会很慢？或者会是吗？

如果将事件附加到文档效率不高，那么完全的 ajax 应用程序又如何呢？我的应用程序是完全ajax的，每个页面都会通过ajax下载。还有其他更有效的解决方案吗？

Answer 1

事件委托(delegate)基本上使用2个不同的过程，

1. 事件冒泡，例如，当您单击某个元素时事件将冒泡到文档中以触发相关事件。
2. 匹配，到达文档后(事件冒泡期间)造成事件冒泡的人将被核实文档附带选择器。如果匹配则相关事件将被触发。

因此，您通过声明通用选择器来提倡匹配。坦率地说，匹配 2 个或 3 个元素比事件冒泡时遍历文档花费的时间更少。在这种情况下，如果您使用静态最接近父级而不是 document，遍历时间将会减少，从而提高性能。

虽然匹配所需的时间较少，但当匹配的元素超过 15 个时，即使您使用最接近的父级而不是 document，也会影响性能。

总而言之，我们必须根据常识谨慎使用事件委托(delegate)，因为我们知道上述两个不同的过程是在幕后发生的。