jQuery中.bind() .live() .delegate() .on()區別

$(selector).bind(event,data,function)
$(selector).live(event,data,function)//jquery1.9版本如下支持，jquery1.9及其以上版本刪除了此方法，jquery1.9以上版本用on()方法來代替
$(selector).delegate(childSelector,event,data,function)//jquery1.4.2及其以上版本；
$(selector).on(event,childselector,data,function)//jquery1.7及其以上版本；jquery1.7版本出現以後用於替代bind()，live()綁定事件方式；

event：必需項；添加到元素的一個或多個事件，例如 click,dblclick等；

　　　　　　　　　　單事件處理：例如 $(selector).bind("click",data,function);

　　　　　　　　　　多事件處理：1.利用空格分隔多事件，例如 $(selector).bind("click dbclick mouseout",data,function);

　　　　　　　　　　　　　　　　2.利用大括號靈活定義多事件，例如 $(selector).bind({event1:function, event2:function, ...})　

　　　　　　　　　　　　　　　　3.空格相隔方式：綁定較爲死板，不能給事件單獨綁定函數,適合處理多個事件調用同一函數狀況；

　　　　　　　　　　　　　　　　　大括號替代方式：綁定較爲靈活，能夠給事件單獨綁定函數；　　　  

data：可選；須要傳遞的參數；

function：必需；當綁定事件發生時，須要執行的函數；適用全部版本，可是根據官網解釋，自從jquery1.7版本之後bind()函數推薦用on()來代替。

 

 

一、.bind()是直接綁定在元素上，也很好的解決了瀏覽器在事件處理中的兼容問題。若是不人爲的設置stopPropagation(Moder Browser), cancelBubble(IE)，那麼它的全部父元素，祖宗元素都會受之影響

$('a').bind('click', function() { alert("That tickles!") });

當咱們在a 上面點擊的時候，首先會觸發它自己所綁定的click事件，而後會一路往上，觸發它的父元素，祖先元素上全部綁定的click事件。

/* The .bind() method attaches the event handler directly to the DOM 
   element in question ( "#members li a" ). The .click() method is 
   just a shorthand way to write the .bind() method. */

$( "#members li a" ).bind( "click", function( e ) {} ); 
$( "#members li a" ).click( function( e ) {} );  

.click(), .hover()...這些很是方便的事件綁定，都是bind的一種簡化處理方式。對於利用ID選出來的元素是很是好的，不單單是很快的能夠hook上去(由於一個頁面只有一個id),並且當事件發生時，handler能夠當即被執行(相對於後面的live, delegate)實現方式

缺點：

• 它會綁定事件到全部的選出來的元素上
• 它不會綁定到在它執行完後動態添加的那些元素上
• 當元素不少時，會出現效率問題
• 當頁面加載完的時候，你才能夠進行bind()，因此可能產生效率問題

二、.live()則是經過冒泡的方式來綁定到元素上的。更適合列表類型的，綁定到document DOM節點上。一旦事件冒泡到document上，jQuery將會查找selector/event metadata,而後決定那個handler應該被調用。當handler在執行的時候，由於有冒泡的參與，確實會有一些延遲，可是綁定的時候是特別的快。和.bind()相比的時候有一個好處就是咱們不須要在每一個元素上再去綁定事件，而只在document上綁定一次就能夠了。儘管這個不是最快的方式，可是確實是最少浪費的。

優勢：

• 這裏僅有一次的事件綁定，綁定到document上而不像.bind()那樣給全部的元素挨個綁定
• 那些動態添加的elemtns依然能夠觸發那些早先綁定的事件，由於事件真正的綁定是在document上
• 你能夠在document ready以前就能夠綁定那些須要的事件

缺點：

• 從1.7開始已經不被推薦了，因此你也要開始逐步淘汰它了。
• Chaining沒有被正確的支持
• 當使用event.stopPropagation()是沒用的，由於都要到達document
• 由於全部的selector/event都被綁定到document, 因此當咱們使用matchSelector方法來選出那個事件被調用時，會很是慢
• 當發生事件的元素在你的DOM樹中很深的時候，會有performance問題

三、.delegate()則是更精確的小範圍使用事件代理，性能優於.live()。它不會把全部的event所有綁定到document,而是由你決定把它放在哪兒。而和.live()相同的地方在於都是用event delegation.

 優勢：

• 你能夠選擇你把這個事件放到那個元素上了
• chaining被正確的支持了
• jQuery仍然須要迭代查找全部的selector/event data來決定那個子元素來匹配，可是由於你能夠決定放在那個根元素上，因此能夠有效的減少你所要查找的元素。
• 能夠用在動態添加的元素上

缺點：

• 須要查找那個那個元素上發生了那個事件了，儘管比document少不少了，不過，你仍是得浪費時間來查找。

四、.on()則是最新的1.9版本整合了以前的三種方式的新事件綁定機制。.bind(), .live(), .delegate()都是經過.on()來實現的，.unbind(), .die(), .undelegate(),也是同樣的都是經過.off()來實現的。