[jQuery] Event Handling – bind(), delegate(), live() & on()

The general way to add a event handler to an event was to use the “bind()” method in the early jQuery releases. But jQuery introduced additional methods that seem to do the same thing. Let’s find out what they are.

 

1. bind()

The “bind()” method attaches a handler to an event for the elements. The basic format is like this:

  • .bind( eventType [, eventData], handler(eventObject) )

Note that you can optionally pass the data to the event handler. The “data” property of an “event” object is used to retrieve the data again.

$(document).ready(function () {
  $('input:submit').bind('click', { msg: 'Hello!' }, function (event) {
   alert(event.data.msg);
   event.preventDefault();
  });
});

 

2. Problems of bind()

bind()” has been existed since  jQuery 1.0 and works around the various cross-browser issues. But developers point out it has some problems.

  • It does not attach event handlers to elements added dynamically that matches the same selector.
  • There are performance concerns when dealing with a large selection.

 [Note] bind() is now depreciated and should not be used.

 

3. live()

The “live()” function was introduced as of jQuery 1.3.

  • .live( events [, data], handler(eventObject) )

The main difference of live() and bind() is that the live() will attach an event handler to the dynamically added elements in the future.

live()” appears to work just like “bind()” but internally they are quite different. The magic is done using the event bubbling. The “live()” method attaches the event handler to the root level document along with the associated selector and event information. When the event have bubbled up to the document level, jQuery looks at the selector and determine which event handler should be called. That’s why “live()” works with the dynamically added elements.

It has its own problems and is deprecated as of jQuery 1.7. Therefore it shouldn’t be used.

  • Calling event.stopPropagation() does not make sense any more because the event has already delegated up to the document.
  • When the DOM is deep, performance suffers.
  • Chaining is not properly supported.

 

4. delegate()

delegate()” looks similar to “live()” except the “selector” parameter. Instead of attaching the selector/event information to the document, you can choose where it is anchored.

  • .delegate( selector, eventType, [eventData,] handler(eventObject) )
$("table").delegate("td", "click", function() {
  $(this).toggleClass("selected");
});

In this example, the event handler will be attached to the “table” element rather than document. So any td elements (even dynamically added ones) are handled by the same event handler.

delegate()” generally performs better than “live()“.

[Note] delegate() is also depreciated as of jQuery 3.0.  

 

5. on()

According to jQuery documentation, “As of jQuery 1.7, the .on() method provides all functionality required for attaching event handlers.”

  • .on( events [, selector] [, data], handler(eventObject) )

on()” is kind of a new syntax for various event methods. Rather than using “bind()” or “delegate()” (even “live()“), you just need to use “on()” method.

$("#memu li a").on("click", function( e ) {} ); // like bind()
$("#memu").on("click", "li a", function( e ) {} ); // like delegate()

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s