问题
Recently the jQuery team start recommending to use on instead of bind for binding events to the DOM.
I would like to know if there is a difference between them, what is the benefit of using the on function and if it would be a good call of changing all my bind's to on's functions in my code?
回答1:
The jQuery project is moving towards putting more and more functionality in fewer methods, instead of having separate methods for every separate thing.
The methods bind, live and delegate have all been replaced by the single method on, where you use parameters of different types to determine what the method does.
Comparison:
$(sel).bind(event, f); = $(sel).on(event, f);
$(sel).live(event, f); = $(document.body).on(event, sel, f);
$(sel).delegate(sel2, event, f) = $(sel).on(event, sel2, f);
If you are using live, you should replace that, as the usage of that method is a bit awkward. Also, the live method creates a delegate on the body element, and you should try to bind the delegate to a closer scope.
If you are using bind and delegate it's no panic to replace them with on right away. You can do that in new code, and in code that you edit anyway, but those methods are not about to go away in the nearest future.
回答2:
On attaches an event handler from now and for the future. Bind, however only attaches the event when you set it. If other elements are added dynamically, bind won't fire for those elements.
回答3:
basically there is no difference in basic use case
$( '#elementID' ).bind( 'click', function(){...} );
$( '#elementID' ).on( 'click', function(){...} );
these two are functionally same..
.on() also does event delegation, and is thus preferred.
The idea for adding .on() was to create a unified event API, rather than having multiple functions for binding event;
.on() replaces .bind(), .live() and .delegate().
and as of jquery 1.7 ...bind is just an alias of .on()
回答4:
bind is just a shorthand that will be probably removed. From jQuery's source code:
...
bind: function( types, data, fn ) {
return this.on( types, null, data, fn );
},
...
You can look intro the source code yourself to find a lot about how jQuery works.
回答5:
The difference is that bind bind an event, on can bind event too, but it can also manage event delegation.
http://api.jquery.com/on/#direct-and-delegated-events
If you want to check this more in detail, checkout this blog post: http://www.elijahmanor.com/2012/02/differences-between-jquery-bind-vs-live.html
来源：https://stackoverflow.com/questions/16091970/best-practice-using-bind-or-on-functions-in-jquery