$(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版本出現(xiàn)之后用于替代bind()，live()綁定事件方式；

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

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

缺點(diǎn)：

• 它會(huì)綁定事件到所有的選出來的元素上
• 它不會(huì)綁定到在它執(zhí)行完后動(dòng)態(tài)添加的那些元素上
• 當(dāng)元素很多時(shí)，會(huì)出現(xiàn)效率問題
• 當(dāng)頁(yè)面加載完的時(shí)候，你才可以進(jìn)行bind()，所以可能產(chǎn)生效率問題

2、.live()
則是通過冒泡的方式來綁定到元素上的。更適合列表類型的，綁定到document DOM節(jié)點(diǎn)上。一旦事件冒泡到document上，jQuery將會(huì)查找selector/event metadata,然后決定那個(gè)handler應(yīng)該被調(diào)用。當(dāng)handler在執(zhí)行的時(shí)候，因?yàn)橛忻芭莸膮⑴c，確實(shí)會(huì)有一些延遲，但是綁定的時(shí)候是特別的快。和.bind()相比的時(shí)候有一個(gè)好處就是我們不需要在每個(gè)元素上再去綁定事件，而只在document上綁定一次就可以了。盡管這個(gè)不是最快的方式，但是確實(shí)是最少浪費(fèi)的。

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

優(yōu)點(diǎn)：

• 這里僅有一次的事件綁定，綁定到document上而不像.bind()那樣給所有的元素挨個(gè)綁定
• 那些動(dòng)態(tài)添加的elemtns依然可以觸發(fā)那些早先綁定的事件，因?yàn)槭录嬲慕壎ㄊ窃赿ocument上
• 你可以在document ready之前就可以綁定那些需要的事件

缺點(diǎn)：

• 從1.7開始已經(jīng)不被推薦了，所以你也要開始逐步淘汰它了。
• Chaining沒有被正確的支持
• 當(dāng)使用event.stopPropagation()是沒用的，因?yàn)槎家竭_(dá)document
• 因?yàn)樗械膕elector/event都被綁定到document, 所以當(dāng)我們使用matchSelector方法來選出那個(gè)事件被調(diào)用時(shí)，會(huì)非常慢
• 當(dāng)發(fā)生事件的元素在你的DOM樹中很深的時(shí)候，會(huì)有performance問題
• 3 .delegate()

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

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

優(yōu)點(diǎn)：

• 你可以選擇你把這個(gè)事件放到那個(gè)元素上了
• chaining被正確的支持了
• jQuery仍然需要迭代查找所有的selector/event data來決定那個(gè)子元素來匹配，但是因?yàn)槟憧梢詻Q定放在那個(gè)根元素上，所以可以有效的減小你所要查找的元素。
• 可以用在動(dòng)態(tài)添加的元素上

缺點(diǎn)：

需要查找那個(gè)那個(gè)元素上發(fā)生了那個(gè)事件了，盡管比document少很多了，不過，你還是得浪費(fèi)時(shí)間來查找。

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

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

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

為了把處理程序附加到可能還未存在于DOM中的DOM元素之上。因?yàn)閎ind是直接把處理程序綁定到各個(gè)元素上，它不能把處理程序綁定到還未存在于頁(yè)面中的元素之上。

如果你運(yùn)行了$('a').bind(…)，而后新的鏈接經(jīng)由AJAX加入到了頁(yè)面中，則你的bind處理程序?qū)τ谶@些新加入的鏈接來說是無效的。而另一方面live和delegate則是被綁定到另一個(gè)祖先節(jié)點(diǎn)上，因此其對(duì)于任何目前或是將來存在于該祖先元素之內(nèi)的元素都是有效的。

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

阻止事件的傳播

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

轉(zhuǎn)載于:https://www.cnblogs.com/shaner/p/7887037.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。