Does jQuery class selector event binding attach eventHandler to each instance?

Question

Im learning jQuery and when I read about $('.className').bind('click',function(){}) method one doubt arose.

Does this method attach my event handler to each instance of className in the DOM? If so would it be a good approach -- like attaching an event handler to lot of instances on a page is an overhead right?

Or is it making use of event delegation -- say, the handler would be bound to some common parent which would make use of e.target equalTo className and execute the click event, so that handler is bound to only one DOM element?

Please help me understand. Thanks.

---

One more doubt. If I do attach an event to each and every dom element where does the overload come into effect? Will it cause extra load to the browser while execution or would it make the dom heavy (by heavy I mean, difficulty in parsing dom)?

Answer 1

It sure does bind your callback to each and every one of those elements. If you have a lot of elements matching the selector, it is definitely better to use event delegation.

However, you don't have to manually fiddle around with e.target. jQuery has the overloaded .on() method specifically for this scenraio:

$('#parent').on('click', '.children', function (){});

You should always attach the event handler to the closest parent possible, so that the least amount of elements will be affected by the event listener.

Answer 2

$('.className').bind('click',function(){}) does attach the event handler to each available element in the dom... event delegation also has its share of issues like instead of listening to only events with in the target elements it need to evaluate all the click events happening within the delegated parent again the delegation target selector...

that said, I prefer event delegation if there are a lot of elements.... but prefer to attach the handler to the most immediate common ancestor element instead of binding it to body or document