關於jQuery中on()，bind()，live()用法的區別

on(),bind(),live()用法的區別

以上三種函數均可覺得一個頁面元素綁定事件，其中on()是核心，其餘兩個用法上略有不一樣。

下面貼上bind()，live()的代碼

jQuery.fn.extend({
        ...
        bind: function( types, data, fn ) {
        return this.on( types, null, data, fn ); //第二個參數爲null
    },
        ...
        live: function( types, data, fn ) {
        jQuery( this.context ).on( types, this.selector, data, fn ); 
        //第二個參數爲選擇器所選中的jq元素
        return this;
    },
        ...
});

能夠看出，bind()，live()都是調用的on()函數，只不過是傳遞的參數不一樣。

體如今用法上的區別以下：

$('#id').bind('click',function(){});
$('#id').bind('click','div',function(){});
//以上兩種方法都把事件綁定到$('#id')上,由於bind()方法把‘div’設爲null

$('#id').live('click',function(){});
$('#id').live('click','div',function(){});
//第二種方法能夠將事件綁定到$('#id div')中

on()函數代碼解析

on: function( types, selector, data, fn, /*INTERNAL*/ one ) {
    ....//判斷參數類型，肯定相應參數
    return this.each( function() {
        jQuery.event.add( this, types, fn, data, selector );
    });
}
jQuery.event = {
    add: function( elem, types, handler, data, selector ) {
        ....
        if ( elem.addEventListener ) {
            elem.addEventListener( type, eventHandle, false );
        } else if ( elem.attachEvent ) {
            elem.attachEvent( "on" + type, eventHandle );
        }
        ....
    }
    ....
}

原理從代碼中能夠看出，其實仍是調用原生JavaScript中的綁定事件接口。值得一提的是，在爲頁面中的元素組進行綁定事件的時候，要考慮使用事件代理的方法對代碼進行優化。例子以下：

$('#myTable td').on('click',function(){
    $(this).css('background','red');
});
//給每個td元素都綁定事件

$('#myTable').on('click',function(e){
    var $clicked = $(e.target);  //e.target能夠捕捉到觸發事件的目標
    $clicked.css('background','red');
});
//這種使用事件代理的方法只需向父元素綁定一個事件

$('#myTable td').on('click','td',function(){
    $(this).css('background','red');
});
//jquery中的on()方法將這種事件監聽封裝起來。

關於事件對象event的事件目標屬性，在dom中這個屬性名是target，在IE對象中這個屬性名是srcElement.