Performance overhead of 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
});

1. How many event listeners are established? 1 or 3?

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

3. Is it best, performance-wise, to not define jQuery calls on classes of elements if those classes contain a large number of elements in the markup?

Azeotrope

Answer 1

1) 3 event listeners all pointing to the same function.

2) That depends on what you're trying to accomplish

3) Try doing some benchmarks, see where the performance hit becomes noticeable. I've had up to 1000 elements being selected then animated at the same time - and (in FF) the performance hit was unnoticeable up until about 600-700 elements. Performance of course depends on browser and JS engine. Some (Chrome) will be faster than others (IE). Its worth mentioning that for that site I used the same method as you have in your question.

Pyxis

i usually just write my own, its not too hard. – Pyxis

Answer 2

1) 3

2) Yes

3) Yes, as you have said use event delegation which in jQuery is available through the .live function. Be carefull, too many .live function can also impact performance so do consider native event delegation.

Popover

I don't think event delegation has anything to do with .live methods. – Calorimeter

It does. live delegates to listening on the document for bubbled events. – Popover

@SolutionYogi, jQuery's live events are implemented via event delegation. – Putumayo

Well, the doc says that 'live' methods are implemented using 'event delegation'. It doesn't mean that 'event delegation' is available through the .live methods. Event delegation is a very generic concept which stands on its own. You could have used Event delegation even before the .live methods were introduced in jQuery. – Calorimeter

I think your playing on words. As you can see by my post I do understand event dele is available without using .live! – Popover

I don't mean to offend you, IMHO, one has to be very precise with words when it comes to technical detail. You wrote "event delegation which in jQuery is available through the .live function" If someone who is not familiar with event delegation concept/.live methods, they will assume that to implement event delegation, they need to use .live methods which is certainly not true. – Calorimeter

But using .live you are internally using event delegation, therefore event delegation is available through the .live function rather than having to roll it yourself. – Popover

I think you are playing with words. IMHO, the above statement is not correct. It's up to you whether you want to accept it or not. Also, you don't have to rollout anything to implement event delegation, it's a natively available in all browsers because of event bubbling. From the 'live' method docs, I find that they are more limited than using the event delegation yourself. – Calorimeter

Answer 3

1. Yes, because the $() function returns an array and click() is applied to all of the elements therein.
2. Yes. Delegation usually pays off best when you have a large number of nodes that can trigger an event, or when the quantity of those nodes can change. This allows you to only have to initialize your event listener once, no matter what happens to the DOM. If you plan on having more than 100 nodes, I would use event delegation over event handling.
3. Yes. This will improve both your response time (most notably for extremely large lists [please benchmark]), as well as make your initialization O(1) rather than O(n).

Declamation

Answer 4

Completely agree! You must add an event listener to the parent element containing all those nice elements. That will improve the performance a lot.

Lenz

Can you provide an example of how you tell which child element it was that was clicked. I'm struggling to understand how you can work it out if the listener is on the parent. – Retriever