Ber*_*ner 38 javascript jquery events actionlistener onclicklistener
我有一个关于javascript(jQuery)事件/监听器的一般问题.点击监听器的数量是否有任何限制而不会出现性能问题？
atm*_*tmd 30
在性能方面,事件绑定的元素数量是您看到任何问题的位置.
这是一个jsperf测试.您将看到绑定到许多元素的速度要慢得多,即使每种情况下只绑定了一个事件.
jsperf中的第3个测试显示了如何将事件绑定到父元素并使用委托来侦听所需的元素.(在这种情况下.many)
nb测试显示第3个选项是最快的,但那是因为它使用的是一个id而不是一个类的元素.
更新:这是另一个性能测试,显示id使用a 绑定到一个vs一个事件的3个事件class
虽然这是一个老问题，但我觉得它还没有完全回答。
正如atmd指出的那样：将事件处理程序添加到哪里已经很重要了。但是最初的问题似乎更关心触发这些事件处理程序（例如单击或滚动事件）对性能的影响。
是的，向元素添加额外的事件处理程序确实会降低性能。以下是测试以下情况的性能比较：
https://jsbench.me/ztknuth40j/1
<div>有10 个 click处理程序，click事件由jQuery触发。<div>有100 个 click处理程序，click事件由jQuery触发。<div>有10 个 click处理程序，click事件由普通 JS触发。<div>有100 个 click处理程序，click事件由普通 JS触发。（这些结果在每次运行时都会有所不同，并且在很大程度上取决于您的硬件和浏览器）
请记住，这些测试是使用空函数完成的。当添加一个真正的函数来执行一些额外的任务时，性能会进一步降低。
这是在每次单击时更改 div 内容的第二个测试：
https://jsbench.me/ztknuth40j/2
另一方面：即使每秒 100 次操作也非常快（这意味着，每个事件处理程序在一秒钟内执行 100 次）并且没有用户会注意到延迟。
我认为您不会遇到像click或mouseenter处理程序这样的用户操作事件的问题，但在使用快速触发的事件时需要注意，例如scroll或mouseover。
此外，随着计算机变得更快，浏览器应用越来越多的优化，对于“太多”的事件处理程序的数量没有硬性限制。它不仅取决于调用的函数和观察到的事件，还取决于用户的设备和浏览器。