I have a general question about javascript (jQuery) events/listeners. Is there any limit for the number of click listener without getting performance problems?
If multiple identical EventListeners are registered on the same EventTarget with the same parameters, the duplicate instances are discarded.
TLDR; Always remove event listeners when you don't plan on using them any longer.
You can add many event handlers to one element. You can add many event handlers of the same type to one element, i.e two "click" events. You can add event listeners to any DOM object not only HTML elements.
The maximum number of event listeners that can be attached to the event can be set by the setMaxListeners function and the default value is 10.
In terms of performance, the number of elements the event is bound to is where you'd see any issues.
Here is a jsperf test. You'll see that binding to many elements is much slower, even though only one event is being bound in each case.
The 3rd test in the jsperf shows how you'd bind the event to a parent element and use delegation to listen for the elements you want. (In this case .many
)
n.b. The test shows that the 3rd option is the fastest, but that's because it's targeting the element with an id
and not a class.
Update: Here's another perf test showing 3 events bound to an id
vs one event bound using a class
Though this is an old question, I do not feel that it's completely answered yet.
As atmd pointed out: It's already important where you're adding the event handlers to. But the original question seems to be more concerned about the performance impact of triggering those event handlers (e.g. click or scroll events).
And yes, adding additional event handlers to an element DOES decrease performance. Here is a performance comparison to test the following cases:
https://jsbench.me/ztknuth40j/1
<div>
has 10 click
handlers, and the click
event is triggered by jQuery.<div>
has 100 click
handlers, and the click
event is triggered by jQuery.<div>
has 10 click
handlers, and the click
event is triggered by plain JS.<div>
has 100 click
handlers, and the click
event is triggered by plain JS.(Those results vary on every run and depend largely on your hardware and browser)
Keep in mind that those tests are done with an empty function. When adding a real function that performs some additional tasks, the performance will slow down even further.
Here is a second test that changes the contents of a div on each click:
https://jsbench.me/ztknuth40j/2
On the other hand: Even 100 operations per second are super fast (it means, that every event handler is executed 100 times in a single second) and no user will notice the delay.
I think you will not run into problems with user-action events like click
or mouseenter
handlers, but need to watch out when using events that fire rapidly, like scroll
or mouseover
.
Also, as computers get faster and browsers apply more and more optimizations, there is no hard limit for how many event handlers are "too much". It not only depends on the function that's called and the event that's observed but also on the device and browser of the user.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With