第一種方式:
$(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"}); }); });
下面就來了解下它們之間的區別
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) 指定的元素(屬于被選元素的子元素)添加一個或多個事件處理程序,并規定當這些事件發生時運行的函數
$(“#container”).delegate(“a”,”click”,function(){alert(“ok”);})
on(events,[selector],[data],fn)
在選擇元素上綁定一個或多個事件的事件處理函數
最大的差別:bind()的事件函數只能針對已經存在的元素進行事件的設置。如果你想對動態創建的元素bind()事件,是沒有辦法達到效果的,但是live(),on(),delegate()均支持未來新添加元素的事件設置。
.bind()是直接綁定在元素上()
jquery1.7版本以前比較受推崇,1.7版本出來之后,官方已經不推薦用bind(),替代函數為on(),這也是1.7版本新添加的函數,同樣,可以用來代替live()函數,live()函數在1.9版本已經刪除;
.delegate()則是更精確的小范圍使用事件代理,性能優于.live()(在Jquery1.7中已經移除)
.live()則是通過冒泡的方式來綁定到元素上的。更適合列表類型的,綁定到document
DOM節點上。和.bind()的優勢是支持動態數據。(在Jquery1.7中已經移除,相應die()也移除)
live()函數和delegate()函數兩者類似,但是live()函數在執行速度,靈活性和CSS選擇器支持方面較delegate()差些
.on()則是最新的1.9版本整合了之前的三種方式的新事件綁定機制(在Jquery1.7中添加,相應off()也添加)
jquery1.4 及之前的版本,由.click() 或 bind()方法綁定的事件,不能適用腳本創建的新元素:即是說頁面加載完成后,再動態創建的DOM元素并不能響應之前綁定的事件!
舊版本的處理方法是使用.live()方法來代替事件綁定.bind(),使得綁定的事件能適用腳本創建的新元素。
但自jq1.7版本開始,官方已明文表示不再推薦使用使用.live()方法,官方解釋為:live()調用過程首先將事件方法綁定到了Document,然后,查找Document里是否有匹配元素。
這個過程對于性能來說可能比較浪費。官方推薦將.live()改成Delegate()方法,適用腳本創建的新元素。
jq1.8開始,官方又再次申明:如果你開發最新版本的jQuery,完全可以使用on()方法來處理所有的事件綁定,避免過多的方法調用,因為其實在最新版本的jQuery類庫中,所有以上舊版方法在后面其實都是調用on()方法。
總結
jQuery推出on()的目的有2個,一是為了統一接口,二是為了提高性能,所以從現在開始用on()替換bind(), live(), delegate吧。
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com