javascript - Performance overhead of event listeners on CSS classes used in JQuery code - Stack Overflow

admin管理员组

文章数量:1347701

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?

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?

• javascript
• jquery
• event-delegation

Share Improve this question Follow edited Jul 20, 2009 at 4:09 Darko 38.9k1515 gold badges8383 silver badges107107 bronze badges asked Jul 20, 2009 at 3:36 fingerprintfingerprint 9311 silver badge44 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

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

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

3) Try doing some benchmarks, see where the performance hit bees 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.

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.

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).

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

本文标签： javascriptPerformance overhead of event listeners on CSS classes used in JQuery codeStack Overflow