JQuery 1.7.2 API中bind()，on()，live()和delegate()方法的使用

jQuery.fn.extend({on: function( types, selector, data, fn, /*INTERNAL*/ one ) {var origFn, type;// Types can be a map of types/handlersif ( typeof types === "object" ) {// ( types-Object, selector, data )if ( typeof selector !== "string" ) { // && selector != null// ( types-Object, data )data = data || selector;selector = undefined;}for ( type in types ) {this.on( type, selector, data, types[ type ], one );}return this;}if ( data == null && fn == null ) {// ( types, fn )fn = selector;data = selector = undefined;} else if ( fn == null ) {if ( typeof selector === "string" ) {// ( types, selector, fn )fn = data;data = undefined;} else {// ( types, data, fn )fn = data;data = selector;selector = undefined;}}if ( fn === false ) {fn = returnFalse;} else if ( !fn ) {return this;}if ( one === 1 ) {origFn = fn;fn = function( event ) {// Can use an empty set, since event contains the infojQuery().off( event );return origFn.apply( this, arguments );};// Use same guid so caller can remove using origFnfn.guid = origFn.guid || ( origFn.guid = jQuery.guid++ );}return this.each( function() {jQuery.event.add( this, types, fn, data, selector );});},one: function( types, selector, data, fn ) {return this.on( types, selector, data, fn, 1 );},off: function( types, selector, fn ) {if ( types && types.preventDefault && types.handleObj ) {// ( event )  dispatched jQuery.Eventvar handleObj = types.handleObj;jQuery( types.delegateTarget ).off(handleObj.namespace ? handleObj.origType + "." + handleObj.namespace : handleObj.origType,handleObj.selector,handleObj.handler);return this;}if ( typeof types === "object" ) {// ( types-object [, selector] )for ( var type in types ) {this.off( type, selector, types[ type ] );}return this;}if ( selector === false || typeof selector === "function" ) {// ( types [, fn] )fn = selector;selector = undefined;}if ( fn === false ) {fn = returnFalse;}return this.each(function() {jQuery.event.remove( this, types, fn, selector );});},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 );},trigger: function( type, data ) {return this.each(function() {jQuery.event.trigger( type, data, this );});},triggerHandler: function( type, data ) {if ( this[0] ) {return jQuery.event.trigger( type, data, this[0], true );}},toggle: function( fn ) {// Save reference to arguments for access in closurevar args = arguments,guid = fn.guid || jQuery.guid++,i = 0,toggler = function( event ) {// Figure out which function to executevar lastToggle = ( jQuery._data( this, "lastToggle" + fn.guid ) || 0 ) % i;jQuery._data( this, "lastToggle" + fn.guid, lastToggle + 1 );// Make sure that clicks stopevent.preventDefault();// and execute the functionreturn args[ lastToggle ].apply( this, arguments ) || false;};// link all the functions, so any of them can unbind this click handlertoggler.guid = guid;while ( i < args.length ) {args[ i++ ].guid = guid;}return this.click( toggler );},hover: function( fnOver, fnOut ) {return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver );}});

 

从API中可以看到，bind()，live()和delegate()方法都是调用的on()方法，先对这几个方法进行基本介绍：

1）bind():

使用较早版本jQuery的教程或者应用中，我们往往使用bind()方法来将事件绑定到特定的元素上。

2）live():

在老的jQuery版本中，我们有一个方法专门用来处理动态生成的元素的事件绑定 - live()，使用live()方法可以将方法绑定的效果应用到已存在或者新创建的DOM元素。live()首先将click方法绑定到了Document，然后，查找Document里是否有$("#aa")这个元素。 这个过程对于性能来说可能比较浪费，所以我们可以使用如下带参数方法优化方式：

$('#aaa', '#aaaParent').live('click', function(){

});

3)delegate():

在最新的jQuery版本中，我们最好不要使用live()方法，因为它已经被放弃了，这里我们使用delegate方法来指定事件绑定的上下文，如下：

$('#aaaParent').delegate('#aaa','click', function(){  });大家可以看到以上代码中，我们首先设定了方法绑定的上下文 - #container，然后，寻找class为.scv的元素，再绑定click方法。

4)最后：最新的jQuery版本中，所有的方法基本最后都使用on()方法来处理，如果你针对新版本的jQuery做开发，大家可以考虑使用delegate()和on()方法处理事件绑定，虽然以前方法也可以用，但是大都都已经退出历史舞台。