Is there a performance impact in using live instead of bind in jQuery?

I found some questions regarding the live and bind, but none of them was regarding the performance. I think the title is quite clear, so is there a performance impact in using live in jQuery? Why I'm asking this is beacuse you have to do the lookup everytime the even开发者_开发问答t is fired when using live and my thought is that this might impact the performance in a negative way. Or are jQuery doing some magic stuff that speed up this, like listening to some kind of event that is fired when something is added to the DOM?

In general, it has a better overall performance to use .live() / .delegate() when you have lots of (...) elements on your site which need to have an event handler.

It's more expensive to bind 50x event handlers to 50 different nodes than just to bind one event handler to a common parent of these 50 elements (which basically is, what .live() does).

Now one could argue, "well, great, but this comes with overhead event bubbling", which is absolutely correct. That's why .delegate() was introduced. .live() always binds a handler to the document.body which obviously is the parent of any childnode in your markup. .delegate() however takes an argument, where you can specify the "lowest common denominator", which means the closest parentnode that is shared by those elements you want to have an event handler. This reduces the overhead actually to zero.

I have to admit that I never benchmarked (yet) at which point it makes sense to use a "live binding". But then again, it makes sense as soon as you got more than one element to bind handlers to. Only the fact that there only is ONE function instead of N seems convenient to me.

The way .live works is: event is bound to one of the parent nodes. So actually there is no lookup every time event is fired but at the cost of this method being less supported but IE. I'd suggest you to stick with .bind. If you have to bind event to many elements use .delegate method.

The jQuery docs explain exactly how it works:

Event Delegation The .live() method is able to affect elements that have not yet been added to the DOM through the use of event delegation: a handler bound to an ancestor element is responsible for events that are triggered on its descendants. The handler passed to .live() is never bound to an element; instead, .live() binds a special handler to the root of the DOM tree. In our example, when the new element is clicked, the following steps occur:

1. A click event is generated and passed to the for handling.
2. No handler is directly bound to the , so the event bubbles up the DOM tree.
3. The event bubbles up until it reaches the root of the tree, which is where .live() binds its special handlers by default.
   • As of jQuery 1.4, event bubbling can optionally stop at a DOM element "context".
4. The special click handler bound by .live() executes.
5. This handler tests the target of the event object to see whether it should continue. This test is performed by checking if $(event.target).closest('.clickme') is able to locate a matching element.
6. If a matching element is found, the original handler is called on it.

Because the test in step 5 is not performed until the event occurs, elements can be added at any time and still respond to events.

So, kind of the first thing you said. It checks when the event happens.