javascript - What's the difference between jQuery.bind() and jQuery.on()?

Question

And why is .on() now preferred in jQuery 1.7?

Answer 1

.on() now offers a combination of .live(), .delegate() and .bind() all in one unified method. You can get the behavior of any of those three just by how you use the arguments to .on().

These pairs are functionally the same:

// events bound directly to the object they occur on
$('.button').on('click', fn);
$('.button').bind('click', fn);

// events intercepted after bubbling up to a common parent object
$('.container').on("click", '.button', fn);
$('.container').delegate('.button', "click", fn);

More info is described in a jQuery blog entry.

Before unifying these separate functions, jQuery had multiple different implementations. Now, .on() is the superset function and .bind(), .live() and .delegate() all just call .on() in their implementation so there is now only one implementation of the actual event handling. So, from that standpoint, it was also a code cleanup and streamlining issue. Similarly, .die(), .undelegate() and .unbind() just call .off() now rather than have separate implementations.

Note: .live() has been deprecated for all versions of jQuery because it's just a special case of intercepting all the bubbled events on the document object so it can be easily replaced with either .delegate() or .on() and when lots of events were all being handled on the document object, it could become a performance problem checking lots of selectors on every event. It's much more efficient to hook a delegated event like this to a common parent that is much closer to where the event occurs than put them all on the document object (thus why .live() is not good to use).

From the jQuery 1.7 source, you can see how all these functions just now call .on() and .off():

bind: function( types, data, fn ) {
    return this.on( types, null, data, fn );
},
unbind: function( types, fn ) {
    return this.off( types, null, fn );
},

live: function( types, data, fn ) {
    jQuery( this.context ).on( types, this.selector, data, fn );
    return this;
},
die: function( types, fn ) {
    jQuery( this.context ).off( types, this.selector || "**", fn );
    return this;
},

delegate: function( selector, types, data, fn ) {
    return this.on( types, selector, data, fn );
},
undelegate: function( selector, types, fn ) {
    // ( namespace ) or ( selector, types [, fn] )
    return arguments.length == 1? this.off( selector, "**" ) : this.off( types, selector, fn );
},