jQuery綁定事件方法及區(qū)別(bind,click,on,live,one)

第一種方式：

$(document).ready(function(){
 $("#clickme").click(function(){
 alert("hello world click")
 })
})

第二種方式（簡寫方式為第一種）：

$('#clickmebind').bind("click", function(){
 alert("Hello World bind");
});

第三種方式：

$('#clickmeon').on("click",function(){
 alert("hello world on")
}) 

注意：第三種方式只適用于jquery 1.7以上的版本

第四種方式：

$("button").live("click",function(){
 $("p").slideToggle();
});

第五種方式：

$("div").delegate("button","click",function(){
 $("p").slideToggle();
});

如果只綁定一次事件，那接著用one()吧，這個(gè)沒有變化。

$(document).ready(function(){
　　$("p").one("click",function(){
　　　　$(this).animate({fontSize:"+=6px"});
　　});
});

下面就來了解下它們之間的區(qū)別

bind(type,[data],fn) 為每個(gè)匹配元素的特定事件綁定事件處理函數(shù)
$(“a”).bind(“click”,function(){alert(“ok”);});

live(type,[data],fn) 給所有匹配的元素附加一個(gè)事件處理函數(shù)，即使這個(gè)元素是以后再添加進(jìn)來的
$(“a”).live(“click”,function(){alert(“ok”);});

delegate(selector,[type],[data],fn) 指定的元素（屬于被選元素的子元素）添加一個(gè)或多個(gè)事件處理程序，并規(guī)定當(dāng)這些事件發(fā)生時(shí)運(yùn)行的函數(shù)
$(“#container”).delegate(“a”,”click”,function(){alert(“ok”);})

on(events,[selector],[data],fn) 在選擇元素上綁定一個(gè)或多個(gè)事件的事件處理函數(shù)

最大的差別：bind()的事件函數(shù)只能針對已經(jīng)存在的元素進(jìn)行事件的設(shè)置。如果你想對動態(tài)創(chuàng)建的元素bind()事件，是沒有辦法達(dá)到效果的，但是live(),on(),delegate()均支持未來新添加元素的事件設(shè)置。

.bind()是直接綁定在元素上（）
jquery1.7版本以前比較受推崇，1.7版本出來之后，官方已經(jīng)不推薦用bind()，替代函數(shù)為on(),這也是1.7版本新添加的函數(shù)，同樣，可以用來代替live()函數(shù)，live()函數(shù)在1.9版本已經(jīng)刪除；

.delegate()則是更精確的小范圍使用事件代理，性能優(yōu)于.live()（在Jquery1.7中已經(jīng)移除）

.live()則是通過冒泡的方式來綁定到元素上的。更適合列表類型的，綁定到document
DOM節(jié)點(diǎn)上。和.bind()的優(yōu)勢是支持動態(tài)數(shù)據(jù)。（在Jquery1.7中已經(jīng)移除，相應(yīng)die()也移除）

live()函數(shù)和delegate()函數(shù)兩者類似，但是live()函數(shù)在執(zhí)行速度，靈活性和CSS選擇器支持方面較delegate()差些

.on()則是最新的1.9版本整合了之前的三種方式的新事件綁定機(jī)制（在Jquery1.7中添加，相應(yīng)off()也添加）

jquery1.4 及之前的版本，由.click() 或 bind()方法綁定的事件，不能適用腳本創(chuàng)建的新元素：即是說頁面加載完成后，再動態(tài)創(chuàng)建的DOM元素并不能響應(yīng)之前綁定的事件！

舊版本的處理方法是使用.live()方法來代替事件綁定.bind()，使得綁定的事件能適用腳本創(chuàng)建的新元素。

但自jq1.7版本開始，官方已明文表示不再推薦使用使用.live()方法，官方解釋為：live()調(diào)用過程首先將事件方法綁定到了Document，然后，查找Document里是否有匹配元素。
這個(gè)過程對于性能來說可能比較浪費(fèi)。官方推薦將.live()改成Delegate()方法，適用腳本創(chuàng)建的新元素。

jq1.8開始，官方又再次申明：如果你開發(fā)最新版本的jQuery，完全可以使用on()方法來處理所有的事件綁定，避免過多的方法調(diào)用,因?yàn)槠鋵?shí)在最新版本的jQuery類庫中，所有以上舊版方法在后面其實(shí)都是調(diào)用on()方法。

總結(jié)

jQuery推出on()的目的有2個(gè)，一是為了統(tǒng)一接口，二是為了提高性能，所以從現(xiàn)在開始用on()替換bind(), live(), delegate吧。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com