$(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()綁定事件方式；

1、.bind()
是直接綁定在元素上，也很好的解決了瀏覽器在事件處理中的兼容問題。如果不人為的設置stopPropagation(Moder Browser), cancelBubble(IE)，那么它的所有父元素，祖宗元素都會受之影響,當我們在a 上面點擊的時候，首先會觸發它本身所綁定的click事件，然后會一路往上，觸發它的父元素，祖先元素上所有綁定的click事件

//JQuery掃描文檔找出所有的$(‘a')元素，并把alert函數綁定到每個元素的click事件上。 $('a').bind('click', function() { alert("That tickles!") });

缺點：

• 它會綁定事件到所有的選出來的元素上
• 它不會綁定到在它執行完后動態添加的那些元素上
• 當元素很多時，會出現效率問題
• 當頁面加載完的時候，你才可以進行bind()，所以可能產生效率問題

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

//JQuery把alert函數綁定到$(document)元素上，并使用'click'和'a'作為參數。任何時候///只要有事件冒泡到document節點上，它就查看該事件是否是一個click事件，以及該事件的//目標元素與'a'這一CSS選擇器是否匹配，如果都是的話，則執行函數。 //live方法還可以被綁定到具體的元素(或“context”)而不是document上 $('a').live('click',function(){alert('That tickles!')})

優點：

• 這里僅有一次的事件綁定，綁定到document上而不像.bind()那樣給所有的元素挨個綁定
• 那些動態添加的elemtns依然可以觸發那些早先綁定的事件，因為事件真正的綁定是在document上
• 你可以在document ready之前就可以綁定那些需要的事件

缺點：

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

JQuery掃描文檔查找$('#container')，并使用click事件和'a'這一CSS選擇器作為參數把alert函數綁定到$('#container')上。任何時候只要有事件冒泡到$('#container')上，它就查看該事件是否是click事件，以及該事件的目標元素是否與CSS選擇器相匹配。如果兩種檢查的結果都為真的話，它就執行函數。
可以注意到，這一過程與.live()類似，但是其把處理程序綁定到具體的元素而非document這一根上。精明的JS'er們可能會做出這樣的結論，即$('a').live() == $(document).delegate('a')，是這樣嗎?嗯，不，不完全是。 delegate是更精確的小范圍使用事件代理，性能優于.live()。它不會把所有的event全部綁定到document,而是由你決定把它放在哪兒。而和.live()相同的地方在于都是用event delegation.

$('#container').delegate('a','click',function(){alert('That tickles!')})

優點：

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

缺點：

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

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

為什么選擇.live()或.delegate()而不是.bind()

畢竟，bind看起來似乎更加的明確和直接，難道不是嗎?嗯，有兩個原因讓我們更愿意選擇delegate或live而不是bind：

為了把處理程序附加到可能還未存在于DOM中的DOM元素之上。因為bind是直接把處理程序綁定到各個元素上，它不能把處理程序綁定到還未存在于頁面中的元素之上。

如果你運行了$('a').bind(…)，而后新的鏈接經由AJAX加入到了頁面中，則你的bind處理程序對于這些新加入的鏈接來說是無效的。而另一方面live和delegate則是被綁定到另一個祖先節點上，因此其對于任何目前或是將來存在于該祖先元素之內的元素都是有效的。

或者為了把處理程序附加到單個元素上或是一小組元素之上，監聽后代元素上的事件而不是循環遍歷并把同一個函數逐個附加到DOM中的100個元素上。把處理程序附加到一個(或是一小組)祖先元素上而不是直接把處理程序附加到頁面中的所有元素上，這種做法帶來了性能上的好處。

阻止事件的傳播

$('a').bind('click',function(e){ e.preventDefault() e.stopPropagation()} ) live里 要return false;

轉載于:https://www.cnblogs.com/shaner/p/7887037.html

總結

以上是生活随笔為你收集整理的事件绑定的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。