Unified Event Handling API in jQuery – .delegate() Vs .on()

This entry is part 1 of 3 in the series Unified Event Handling in jQuery

JavaScript is an event driven language. Most part of the JavaScript code is event driven. The page load, the click of a button or a link, moving mouse cursor, everything is an event. So, handling of events is a very important topic and jQuery 1.7 has new methods to handle all the events in a unified way.

In the first post of the series, we saw how the .on() and .off() methods of the new Event API replaced the deprecated .bind() and .unbind() methods. Since, the .on() and .off() methods are a part of the Unified Event handling API, so they also replace the .live() and the popular .delegate() and .undelegate() methods.

Delegate Method Vs On Method

Before jQuery 1.7, the .delegate() method was the most effective way of handling the events. Like the .bind() method, the .delegate() method attaches one or more events to all the matching elements. In addition to this, the .delegate() method attaches all the elements that match the existing or future DOM elements. This means that you don’t have to worry about using the .live() method for dynamically added elements.

The .on() method supersedes .delegate() method in jQuery 1.7. So, what are the changes in the syntax?

There are not many changes in the syntax. Only the eventType and the selector switch sides.

.delegate(selector, events, handler);

.on(events, selector, handler);

Going back to the use of the two methods, the following examples compare the .delegate() and .on() methods.

// .delegate() method for < jQuery 1.7 and > jQuery 1.4.3

$('#refulzVisitor).delegate('a', 'click', function(event) {

alert('Visitor clicked on refulzVisitor element');

});

// New .on() method in jQuery 1.7

$('#refulzVisitor).on('click', 'a', function(event) {

alert('Visitor clicked on refulzVisitor element');

});

Off Replaces Undelegate

The .off() method is the reverse of .on() method. It removes the effect of .on() method. In .off() method, all the parameters are optional and parameters can be used to target removal of specific events.

The way .on() replaces .delegate(), similarly the .off() replaces .undelegate(). The changes in the syntax are also similar. The eventType and the selector swap positions.

// Remove click event from anchor elements within #refulzVisitor

// .undelegate() example

$('#refulzVisitor a').undelegate('a', 'click');

// .off() example

$('#refulzVisitor a').off('click', 'a');

The last part of the series will talk about the .live() and .die() methods. These methods are another set of event handling methods, which have been deprecated in jQuery 1.7.

Series NavigationUnified Event Handling API in jQuery – .live() Vs .on() >>

One Response to “Unified Event Handling API in jQuery – .delegate() Vs .on()”

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>