jQuery中綁定事件的區(qū)別有哪些?針對這個問題,這篇文章詳細介紹了相對應(yīng)的分析和解答,希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
龍崗網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián)公司,龍崗網(wǎng)站設(shè)計制作,有大型網(wǎng)站制作公司豐富經(jīng)驗。已為龍崗上千提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)營銷網(wǎng)站建設(shè)要多少錢,請找那個售后服務(wù)好的龍崗做網(wǎng)站的公司定做!
第一種方式:
$(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) 為每個匹配元素的特定事件綁定事件處理函數(shù)$(“a”).bind(“click”,function(){alert(“ok”);});
live(type,[data],fn) 給所有匹配的元素附加一個事件處理函數(shù),即使這個元素是以后再添加進來的$(“a”).live(“click”,function(){alert(“ok”);});
delegate(selector,[type],[data],fn) 指定的元素(屬于被選元素的子元素)添加一個或多個事件處理程序,并規(guī)定當這些事件發(fā)生時運行的函數(shù)$(“#container”).delegate(“a”,”click”,function(){alert(“ok”);})
on(events,[selector],[data],fn)
在選擇元素上綁定一個或多個事件的事件處理函數(shù)
最大的差別:bind()的事件函數(shù)只能針對已經(jīng)存在的元素進行事件的設(shè)置。如果你想對動態(tài)創(chuàng)建的元素bind()事件,是沒有辦法達到效果的,但是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é)點上。和.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版本整合了之前的三種方式的新事件綁定機制(在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里是否有匹配元素。
這個過程對于性能來說可能比較浪費。官方推薦將.live()改成Delegate()方法,適用腳本創(chuàng)建的新元素。
jq1.8開始,官方又再次申明:如果你開發(fā)最新版本的jQuery,完全可以使用on()方法來處理所有的事件綁定,避免過多的方法調(diào)用,因為其實在最新版本的jQuery類庫中,所有以上舊版方法在后面其實都是調(diào)用on()方法。
關(guān)于jQuery中綁定事件的區(qū)別有哪些問題的解答就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,如果你還有很多疑惑沒有解開,可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識。
文章標題:jQuery中綁定事件的區(qū)別有哪些
本文路徑:http://m.rwnh.cn/article48/jipeep.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站維護、微信公眾號、軟件開發(fā)、用戶體驗、關(guān)鍵詞優(yōu)化、網(wǎng)站設(shè)計
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)