The efficiency of adding a listener to a set of jQuery classes compared to using $ .each

Question

The initial instincts tell me that adding a listener using a binding or a simple event method to a set of jQuery elements, for example ..

$('.className').click(funcName);

It is much more suitable than using the $ .each method to add a listener one by one to the same set that ...

$('.className').each(function(){ $(this).click(funcName); });

But when it comes to plug-in development, and you are dealing with the possibility that users call an instance of your plug-in several times throughout the life of the page, to load the page and through ajax after the page loads, is it wrong to apply handlers for each element, and not try abstract handlers on their global set of classes?

My main question, which I mean: "What is the best way to deal with multiple instances of the plugin that gets called when it comes to handling events? What about reducing workload?" I know that we can bind and untie, but is there a better way?

EDIT

partial code from plugin design

 init : function(){ this.each(function(opts){ // adding event handlers here removes // the need to worry about multiple instances // and duplicate handles over the lifetime of the page }); // adding 'global' handlers here may/may not be more // efficient, but adds an issue of multiple instances return this; } 

Answer 1

If you call click once, jQuery will cycle through the entire collection and bind events individually. However, it will do this more efficiently than your alternative, because it does not create a new jQuery object for each element in the set, which will be very slow.

Here is the code from the jQuery source (this is the on method):

 return this.each( function() { jQuery.event.add( this, types, fn, data, selector ); }); 

(event.js, line 936-8)

jQuery.event.add , which is a heavy lifting method, does not need a jQuery object; a simple DOM object is what it needs. This loop (which actually does the same as yours) is far superior in performance because a large bottleneck in your $(this) code is called every time.

Note that the most efficient method would be to use event delegation with the same on method. It might look like this:

 $(document.body).on('click', '.className', funcName); 

This means that "for each click inside document.body check to see if it occurred on the element matching the .className selector, and if it is executing funcName ." You can replace document.body with any other element containing all potential .className elements.

Answer 2

Your question is about "efficiency", which I assume means "speed on the client." Probably any sensible approach will have minimal impact on perceived performance, so I recommend that you choose the encoding template that is easiest to support.

Answer 3

 $('.className').click(funcName); 

less load as it uses a single jquery object

 $('.className').each(function(){ $(this).click(funcName); }); 

more load because it uses the original instance and also generates a new instance for each eached element via $(this) . If $('.className') contains 50 elements, you now have 51 jQuery objects compared to a single object.

Regarding pluggin development, you can use javascript objects and use new for each instance of the plugin. Or you can define a class of parent objects and use .each to install instances. Hope this helps, it's hard to make a recommendation without knowing what you are preparing.

Answer 4

The only real way to find out is through a profile . However, I would say that this is an exercise with premature optimization.

Calling $(this) in a loop has poor performance at work .

If you find it easier and easier to attach handlers in each loop, do this.