jQuery Events - bind, live & delegates

Understand jQuery Events – bind, live & delegate

Developers getting confused with jQuery events like bind(), live() & delegate(). There are very distinguishable difference between all three of them.

Many Web/ UI developers get confused between bind(), live() & delegate() methods about what is the real difference between them. This post may help you understand it well.

To understand the difference between them clearly let’s have one example:

<ul class="sitetools">
	<li><a href="tools.html">Site tools</a></li>
	<li><a href="print.html">Print</a></li>
	<li><a href="add-favorite.html">Add to Favorite</a></li>
</ul>

jQuery Event – bind()

bind() is a method which binds an event to the DOM element which are available at the time of loading a page. Once DOM is ready, this method will checks for the “selector” (.sitetools li a  in our example) passed in the function to bind event. bind() method iterate for each of the match selectors and attach event to each one.

$( ".sitetools li a" ).bind( "click", function(e){} );

bind() method is also used with shorthand method like:

$( ".sitetools li a" ).click( function(e){} );

bind() method is very quick & correct and its shorthand methods (ex: .click(), .hover(), .keypress(), etc…) are very useful and it fires event quickly. bind() method attach event on each of the selectors. Benefit of this, we’re sure where the event is attached but there is negative effect also as it causes performance issue in big application as it iterate through all the selectors individually to attach event and bind() method will not attach an event to dynamically created DOM elements, it only works with static DOM elements.

jQuery Event – live()

live() method uses the same concept as the bind() method but it does the extra work behind the screen. Using the live() method in program is same as the bind() method, just need to replace the bind() keyword with the live().

$( ".sitetools li a" ).live( "click", function(e){} );

But live() method is doing its magic by binding event handler on the dynamically created DOM elements as well which is where the bind() method is lacking. Instead of binding events on each DOM element, live() method binds the event at the document root, so when we do action on targeted DOM element, the events gets bubbled up (delegated, propagated) to the root and get fired.

The good part of this method is, it bind the event on document root one time instead of multiple times. But this method was deprecated in jQuery 1.7+ versions. Chaining and event.stopPropagation() is also not properly supported with this method as the event is already binded to the root of the document. A noticeable disadvantage is, this method binds an event at the root of the document each and every time we attached an event with live() method it bind an event at the root. So when we do any action of DOM elements it will bubble up to the document root every time and check for the matching selectors on the root to check if there might be many events attached.

jQuery Event – delegate()

delegate() method works in a same fashion as the live(). The only difference is delegate() method let you choose where to bind the event instead of binding jQuery event at the document root compared to live() method. Compared to live(), this method uses event delegation correctly.

$( ".sitetools" ).delegate( "click", "li a", function(e){} );

Implementation of delegate() function is not the straight as compared to bind() method. The above code shows that the event is binded to .sitetools  DOM element instead of li a and then targeting li a. So when a user does an action on a tag in the .sitetools DOM, the events bubbled up to the .sitetools and gets fired.

As compared to live() this method is very much effective as it allows us to bind event where we want to. This behavior reduces the iteration to bind an event as in bind() method. This method uses the delegation technic so it supports on dynamically created elements.

Summary

bind() – This method will attach an event to the DOM elements which are static and available at the time of page load.

live() – This method will attach an event to the static & dynamically created DOM elements as it will bind an event to the root of the document.

delegate() – This method will attach an event to both static & dynamically created DOM elements but it will allow us to select where to attach an event instead of binding event at the root of the document.

Some more links:

The Difference Between jQuery’s .bind(), .live(), and .delegate()
jQuery – .bind(), .live(), .delegate(), .on() ( and also .unbind(), .die(), .undelegate(), .off() )
jQuery – bind() vs live() vs delegate() methods

Web/ UI & Front-end developer based in Ahmedabad, GJ, India. Here to help/ discuss community to spread web awareness.

4 comments On Understand jQuery Events – bind, live & delegate

Leave a reply:

Your email address will not be published.