jQuery Event Binding Methods

Posted on June 29, 2012 by Andy Zinsser

Over the years, jQuery has developed a few methods for binding an event to a DOM element. Choices and options are great, but what is best to use? This is a high level overview of what is happening in the browser for each method and why you would use one jQuery method over another.

What happens in the browser during a click?

Being aware of what happens in the browser during a click is necessary to understand the differences between the jQuery methods. The main point to be conscious of is that events propagate (aka: bubble up). When a click occurs on a DOM element, the element notifies its parent, who then notifies his parent, and so on. This event propagates through the DOM until it gets to the document object. jQuery leverages this pattern to create more useful ways of binding events to DOM elements.

jQuery Methods

The primary difference between the jQuery methods are:

• How an event gets bound to an element
• How the event handler gets fired once the event actually occurs.

I’ll be using the ‘click’ event as the example since that is a common use case.

.bind()

Added in v1.0 (August 26th, 2006)

 

Overview:

At the time .bind() is called, jQuery walks through every element in the DOM and binds the event handler to any elements matching the selector. Once the user clicks the element, any bound events get called followed by the event propagating up through the DOM tree.

Binding:

When .bind() is called, every element gets checked to see if its selector matches. If it matches, then the event gets bound to the element.

Firing:

When the element gets clicked, the event handler gets called.

Upsides:

• Since the event handler is bound directly to the DOM element, the time between clicking the element and the bound event getting called is minimal.

Downsides:

• If you have a large DOM, walking through each element in the DOM looking for elements with matching the selector can get expensive
• Only nodes that exist within the DOM at the time .bind() is called will get bound. Any elements that get rendered after .bind() is called will not have the event handler bound to it

.live()

Added in v1.3 (January 14th, 2009)

 

Overview:

Similar to .bind(), but instead of assigning the event handler to the targeted DOM element, it assigns the click handler to the document object. When a click event occurs within the document, jQuery will wait for the event to propagate to the top of the DOM tree. Then, jQuery will check if the element that bubbled up and matches the selector defined when .live() was called.

Binding:

When .live() gets called, the click event handler gets assigned to the document object instead of the individual element.

Firing:

When a click occurs anywhere in the document, jQuery will wait for the event to propagate up the DOM tree. Once the document receives the event, jQuery will check to see if the clicked element matches the selector assigned in the .live() call.

Upsides:

• jQuery saves time during the binding phase by just assigning everything to the document instead of searching the entire DOM for elements matching the selector
• Elements added to the DOM after .live() is called will still be get bound

Downsides:

• Every event handler ends up getting bound to the document object
• Actually firing the event is slightly slower since every event has to propagate up through the DOM and then jQuery has to evaluate what function to call based on the pool of selectors and events bound to the document object.

.delegate()

Added in v1.4.2 (February 19th, 2010)

 

Overview:

Everything about .live() holds true with .delegate(). Except instead of always binding the event handler to the document object, .delegate allows you to bind the handler to the selector of your choice (“.foo”).

Binding:

When .delegate gets called, jQuery walks through the DOM and binds the event handler to any elements matching the ‘context’ selector.

Firing:

When an event occurs and starts propagating up the DOM,  the handler gets called once the event hits a the ‘context’ element.

Upsides:

• All the same upsides of .live()
• Less expensive than .live(). Event though .live() does not need to access the targeted element, jQuery will automatically cache instances of your targeted element. This is a default behavior of jQuery that has zero practical purposes in the case of .live().

Downsides:

• Same issues as .live() except not every event handler gets bound to the document object. So not as much DOM walking occurs. This improves the speed.
• Not all elements created after the .delegate() will get called. So defining your context selector takes some thought.

.on()

Added in v1.7 (November 3rd, 2011)

 

Overview:

.on is all previous methods combined. Calling .on() as demonstrated above, has the same behavior as calling .delegate(). If you leave out the selector parameter, the behavior will be the same as .bind()

 

Summary

Always use .on(). Depending on whether you want to bind the event handler to the document or to a specific node, be sure to include the selector parameter.