Overhead for event listeners on CSS classes used in jQuery code

Question

If my markup looks like this:

<button id="button-1" class="nice"> <button id="button-2" class="nice"> <button id="button-3" class="nice"> 

and I define the following jQuery:

 $(".nice").click(function () { // something happens }); 

• How many event listeners are installed? 1 or 3?

• If I have 1000 buttons instead of 3, should I use event delegation instead?

• Is it better, by performance, not to define jQuery calls for element classes if these classes contain a large number of elements in the markup?

Answer 1

1) 3 event listeners pointing to the same function.

2) It depends on what you are trying to accomplish.

3) Try to perform some tests, see where performance is noticeable. I had up to 1000 elements, which were then animated at the same time - and (in FF) the performance hit was invisible to about 600-700 elements. Performance depends on browser and JS engine. Some (Chrome) will be faster than others (IE). It is worth noting that for this site I used the same method as in your question.

Answer 2

13

2) Yes

3) Yes, as you said, the use of event delegation, which in jQuery is available through . live . Be careful, too much .live function can also affect performance, so consider your own event delegation.

Answer 3

• Yes, since the $() function returns an array and click() applies to all elements in it.
• Yes. Delegation usually pays off best when you have a large number of nodes that can trigger an event, or when the number of these nodes can change. This allows you to initialize the event listener only once, no matter what happens to the DOM. If you plan to have more than 100 nodes, I would use event delegation to handle events.
• Yes. This will improve your response time (especially for extremely large lists [please benchmark]), and also do your initialization O (1), not O (n).

Answer 4

I completely agree! You must add an event listener to the parent element containing all these nice elements. This will greatly improve performance.