Best way to bind an event handler to an element in jQuery for performance

Question

What is the best way to bind an event handler to an element in jQuery for performance?

All elements to which I want to bind an event handler are static and we do not have generated and dynamically created elements:

<div class="foo"></div> <div class="bar"></div> <div class="qux"></div> 

I want to add a click event handler for all of them separately, I have three options.

---

I. Attaching an event handler directly

In this classic method, I will bind an event handler directly to the elements:

 $('.foo').on('click', f); $('.bar').on('click', g); $('.qux').on('click', h); 

---

II. Attaching an event handler to the parent member multiple times

In this method, instead of the previous one, I attach the event handler to the parent, several times, for each element:

 $('body').on('click', '.foo', f); $('body').on('click', '.bar', g); $('body').on('click', '.qux', h); 

---

III. Attach an event handler to the parent just once

This method is similar to the previous method, except for one difference. I will connect the event handler only once, and I will check the desired selectors in the handler itself:

 $('body').on('click', function (e) { var $elem = $(e.target); if ($elem.is('.foo')) { f(); } else if ($elem.is('.bar')) { g(); } else if ($elem.is('.qux')) { h(); } }); 

---

I want to know which one is the best as performance?

Answer 1

I decided to move it from a comment to a response.
IMO, the event binding operation does not greatly affect performance. What you need to consider are the operations that are performed in the handler. This is why the third option is probably the worst.

The second option , AFAIK, is commonly used as event delegation. Basically, if you want to associate an event with an element that will be created in the future, i.e. via AJAX:

 $(document).on('click', '.futureElement', alert); $.post("someurl", {data: someData}, function () { //create element with class .futureElement }); 

the first is the general way to bind an event to jQuery, so it’s the fastest one presented.

Answer 2

Your third solution is by far the worst, as it checks the element class whenever a click event occurs.

The bottleneck here is the jQuery syntax selector, so the first solution is the most efficient and readable.

Answer 3

Let me disagree with the other answers.

Even the tests here http://jsperf.com/test-so-1 say that the last option is the fastest. But I can try to explain why.

In this case:

 $('body').on('click', '.foo', f); 

we use the standard jquery way of binding delegated events. We bind the event to the body and query jQuery to test it against the .foo selector. Each event has an e.target property that actually triggered the event. But the DOM e.target event, so our .foo selector can match one of the parents of e.target . Therefore, jQuery has to do an extra move, for example. find all the parents of e.target and check it with the .foo selector.

This is a 3d option that we directly check only e.target .

If the .foo selector is close to body , then there is not much difference in performance. But if the .foo selector is deep inside the DOM tree, jQuery has to traverse many e.target parents.

Tests showing it:

http://jsfiddle.net/xDyuJ/1/

http://jsfiddle.net/xDyuJ/2/

You can see that it measures only the execution of events. The three-dimensional case is more than 2 times faster. The gap will change relative to the position of the elements in the DOM tree.