附加多个JS点击处理程序会减慢页面的速度吗？

Question

我可能需要在页面上附加200个点击处理程序。 （我无法委托他们，因为他们与需要在单个元素上的jquery插件相关联）

我想知道如果连接这么多点击处理程序会降低性能吗？

我知道鼠标悬停/滚动处理程序可能会被多次触发并且可能会降低页面速度 - 但是点击处理程序的触发次数会减少。但只是让他们“倾听”会让网页变慢吗？

Answer 1

不，不。

你是对的，鼠标悬停处理程序可能会被解雇很多，但是将监听器附加到事件的简单事实不会减慢页面。

但是，如果您在一个事件上有200个侦听器（这是非常不可能的话），那么在触发事件时可能会降低您的速度。再说一次，我认为情况并非如此。

Answer 2

如果你有200个点击处理程序，每个点击处理程序都附加到一个不同的对象，那么这将使你慢下来的唯一地方是附加200个事件处理程序。一旦它们被附加，单个点击将在200个单独的对象上有200个事件处理程序或在1个对象上有1个事件处理程序时没有什么不同。

如果你在同一个对象上有200个点击处理程序，那么当在该对象上处理点击时你会看到一个减速因为它必须进行200个函数调用来执行所有200个事件处理程序。

因此，只要它们都在不同的对象上，唯一的减速就是最初附加事件处理程序。一旦连接，就不会对性能产生影响。

Answer 3

当然事件处理程序不是完全免费的，但是，它们非常便宜。问题是与处理程序相关的事件是做什么的。通常渲染元素，动画等会从浏览器中获得更多的性能损失。

此外，实现事件侦听器的方式也有所不同。例如，请参阅此post