JQuery中的bind、delegate、on、live方法的區別及簡單介紹

Bind()方法：

給元素綁定事件

形式：

.bind(eventType[,eventData],handler(eventObject))

eventType,string類型，一個或多個DOM事件的名稱，好比：click、submit

eventData，Object，將會傳遞給handler函數的數據，也就是eventObject的data屬性中，若是要調用那麼使用eventObject.data

Handler，function，當事件被觸發時執行的函數

 

.bind(eventType[,eventData][,preventBubble])

eventType,string,一個或多個DOM事件的名稱，好比：click、submit

eventData，Object，將會傳遞給handler函數的數據，也就是eventObject的data屬性中，若是要調用那麼使用eventObject.data

preventBubble,boolean,默認爲true，當設置爲false的時候將阻止瀏覽器默認事件發生，而且阻止事件冒泡。.

 

.bind(events)

Events,object,使用json的形式，爲當前元素定義多個事件，例如：

{

click: function() {

$( this ).addClass( "active" );

},

mouseenter: function() {

$( this ).addClass( "inside" );

},

mouseleave: function() {

$( this ).removeClass( "inside" );

}

}

說明：

bind能夠給當前存在的節點添加事件，即使使用標籤選擇器選擇一類標籤，可是也不能給新加的標籤綁定目標時間。當只是簡單的給固定的元素綁定事件時，能夠使用該方法。可是若是是較爲複雜的會動態添加執行事件元素的狀況下，bind方法不適用。

bind中定義的evnetType，能夠是任意的字符串，各個字符串用空格隔開，當該字符串是默認是DOM事件時，調用DOM事件，若是是不默認的DOM事件，那麼就調用自定義事件，這些自定義事件不會被瀏覽器觸發。可是能夠經過trigger()方法手動觸發。

當evnetType中包含"."的時候，.後邊的字符串表示命名空間，也就是當前事件綁定在某命名空間中，那麼命名空間中的事件不會影響其餘事件，對於命名瞭解不深因此對於這塊有更深的瞭解後再說明。

對於一個元素能夠bind多個同一事件，事件觸發按照綁定的順序觸發。

在handler事件中能夠使用this關鍵詞來表示觸發當前事件的當前DOM對象，注意是DOM對象不是JQuery對象，要轉化爲JQuery對象使用$(this)。

 

Live()方法：

該方法已經在Jquery 1.7不推薦使用，1.9中刪除。能夠使用on()、delegate()方法替代。

不使用live()方法的緣由：

1，live方法執行須要先經過選擇器選擇元素，而在大文檔中，會耗費大量時間在選擇特定元素的操做上。

2，live()方法不支持連接使用,例如 $( "a" ).find( ".offsite, .external" ).live(... );不能很好的工做。

3，因爲全部的live()事件都附着到document對象上，事件會在執行前經過最遠、最慢的傳播路徑。

4，移動設備上click時間不會產生冒泡，因此live()方法不會起做用。

還有其餘緣由。因此live事件已經被刪除了。

 

Delegate()方法：

該方法能夠基於某些特定元素(經過選擇器獲得)，附加一個或多個事件到特定元素內部選擇器指定的元素上，不管選擇出的目標元素是當前存在仍是未來建立。

 

形式：

.deletgate(selector,evnetType,handler(evnetObject))

selector，string，用來過濾觸發事件的元素，即目標元素。

eventType，string，與bind中介紹的eventType同樣，多個事件只用空格隔開。

Handler(eventObject)，被觸發的事件。

 

.delegate(selector,eventType,eventData,handler(eventObject))

selector，string，用來過濾觸發事件的元素，即目標元素。

eventType，string，與bind中介紹的eventType同樣，多個事件只用空格隔開。

eventData，Object，將會傳遞給handler函數的數據，也就是eventObject的data屬性中，若是要調用那麼使用eventObject.data

Handler(eventObject)，被觸發的事件。

 

.delegate(selector,events):

selector，string，用來過濾觸發事件的元素，即目標元素。

Events,object,

使用json的形式，爲當前元素定義多個事件，例如：

{

click: function() {

$( this ).addClass( "active" );

},

mouseenter: function() {

$( this ).addClass( "inside" );

},

mouseleave: function() {

$( this ).removeClass( "inside" );

}

}

說明：

在JQuery1.7以後delegate已經被on取代，在1.4-1.7之間，delegate任然是最有效的給元素綁定事件的方式。

 

on方法(JQuery推薦使用)：

附加一個事件處理函數的一個或多個事件到選定的元素，不管選擇出的目標元素是當前存在仍是未來建立。

形式：

.on(events[,selector][,data],handler(evnetObject))

Events,string,事件名，能夠是空格隔開的多個事件也但是帶有命名空間的事件。Click submit 或 click.myPlugin

Selector,string,用來指明調用on方法的JQuery對象的特殊子元素，若是沒有指定那麼就是綁定到調用on方法的JQuery對象。

data，object，經過eventObject.data傳遞到觸發事件中的數據

Handler(eventObject),被觸發的函數，這裏也能夠使用false，false==returnfalse。

 

.on(events[,selector][,data])

Events,object,

使用json的形式，爲當前元素定義多個事件，例如：

{

click: function() {

$( this ).addClass( "active" );

},

mouseenter: function() {

$( this ).addClass( "inside" );

},

mouseleave: function() {

$( this ).removeClass( "inside" );

}

}

Selector,string,用來指明調用on方法的JQuery對象的特殊子元素，若是沒有指定那麼就是綁定到調用on方法的JQuery對象

Data,object,經過eventObject.data傳遞到觸發事件中的數據

 

說明：

on方法是當前JQuery推薦使用的事件綁定方法，相反方法是off()，附加只運行一次就刪除函數的方法是one()。