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()來代替。

 

 

1、.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()，所以可能產生效率問題

2、.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問題

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

 優點：

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

缺點：

• 需要查找那個那個元素上發生了那個事件了，盡管比document少很多了，不過，你還是得浪費時間來查找。

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