第一種方式：

$(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()吧，這個沒有變化。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

總結

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

以上就是小編為大家整理的jq綁定事件方法及區(qū)別的全部內容啦~希望大家繼續(xù)支持腳本之家~

最新評論