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()吧,這個沒有變化。
$(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)存在的元素進行事件的設置。如果你想對動態(tài)創(chuàng)建的元素bind()事件,是沒有辦法達到效果的,但是live(),on(),delegate()均支持未來新添加元素的事件設置。
.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)移除,相應die()也移除)
live()函數(shù)和delegate()函數(shù)兩者類似,但是live()函數(shù)在執(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()調(diào)用過程首先將事件方法綁定到了Document,然后,查找Document里是否有匹配元素。
這個過程對于性能來說可能比較浪費。官方推薦將.live()改成Delegate()方法,適用腳本創(chuàng)建的新元素。
jq1.8開始,官方又再次申明:如果你開發(fā)最新版本的jQuery,完全可以使用on()方法來處理所有的事件綁定,避免過多的方法調(diào)用,因為其實在最新版本的jQuery類庫中,所有以上舊版方法在后面其實都是調(diào)用on()方法。
總結(jié)
jQuery推出on()的目的有2個,一是為了統(tǒng)一接口,二是為了提高性能,所以從現(xiàn)在開始用on()替換bind(), live(), delegate吧。
以上就是小編為大家整理的jq綁定事件方法及區(qū)別的全部內(nèi)容啦~希望大家繼續(xù)支持腳本之家~
- JQuery綁定事件四種實現(xiàn)方法解析
- jquery綁定事件 bind和on的用法與區(qū)別分析
- jQuery事件綁定和解綁、事件冒泡與阻止事件冒泡及彈出應用示例
- jquery 給動態(tài)生成的標簽綁定事件的幾種方法總結(jié)
- jQuery使用bind函數(shù)實現(xiàn)綁定多個事件的方法
- jQuery中的on與bind綁定事件區(qū)別實例詳解
- 淺談jquery之on()綁定事件和off()解除綁定事件
- jQuery on()方法綁定動態(tài)元素的點擊事件無響應的解決辦法
- 深入理解JQuery循環(huán)綁定事件
- jquery html動態(tài)添加的元素綁定事件詳解
- jquery事件綁定方法介紹
相關文章
jQuery插件easyUI實現(xiàn)通過JS顯示Dialog的方法
這篇文章主要介紹了jQuery插件easyUI實現(xiàn)通過JS顯示Dialog的方法,實例分析了jQuery插件easyUI彈出Dialog的具體實現(xiàn)技巧,需要的朋友可以參考下2016-09-09
jquery ajax提交表單數(shù)據(jù)的兩種方式
貌似AJAX越來越火了,作為一個WEB程序開發(fā)者要是不會這個感覺就要落伍,甚至有可能在求職的時候?qū)冶惶蕴?。我也是一個WEB程序開發(fā)者,當然我也要“隨波逐流”一把,不然飯碗不保啊!2009-11-11
jQuery+PHP實現(xiàn)可編輯表格字段內(nèi)容并實時保存
在本例中,我們會通過jQuery實現(xiàn)單擊將一個文本信息變?yōu)榭删庉嫷谋韱?,你可以對文本?nèi)容進行編輯,然后點擊“確定”按鈕,新的內(nèi)容將發(fā)送到后臺PHP程序處理,并保存到數(shù)據(jù)庫;當點擊“取消”按鈕,則頁面恢復到初始狀態(tài),需要的朋友可以參考下2015-10-10
jquery層級選擇器(匹配父元素下的子元素實現(xiàn)代碼)
下面小編就為大家?guī)硪黄猨query層級選擇器(匹配父元素下的子元素實現(xiàn)代碼)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-09-09

