解析jQuery的三種bind/One/Live事件綁定使用方法
jQuery是 一款優(yōu)秀的JavaScript框架,在舊版里主要用bind()方法,在新版里又多了兩種One(),Live(),下面介紹這幾種方法的使用:
1. bind/Unbind
在jquery的事件模型中,有兩個(gè)基本的事件綁 定函數(shù),bind與unbind,這兩個(gè)函數(shù)的含義就是匹配頁(yè)面元素進(jìn)行相關(guān)事件的處理。比如我們?cè)贘S中經(jīng)常使用到的 onfocus,onblur,onmouseover,onmousedown等事件都可以作為bind的參數(shù)進(jìn)行傳遞。
$("#id").bind('click',function(){alert('tt!')});
其中bind的第一個(gè)參數(shù)代表的含義是:事件類型(注意不需要加on),function中的代碼就是你要執(zhí)行的邏輯 代碼
多個(gè)事件綁定:bind還允許你綁定多個(gè)事件,事件名字之間用空格隔開,例如:
$('a').bind('click mouseover',function(){
在最新的jquery1.4版本中,對(duì)bind方法進(jìn)行了改進(jìn),你可以在bind方法傳入一個(gè)類JSON對(duì)象來(lái)一次綁定多 個(gè)事件處理函數(shù)。
$('a').bind({
click:function(){alert('a');},
mouseover:function(){alert('a again!')}
在function函數(shù)中,你還可以通過(guò)傳遞一個(gè)javaScript對(duì) 象給function方法,這個(gè)事件對(duì)象通常是可以省略的。
bind中還有一個(gè)參數(shù)data, 該參數(shù)一般情況下很少使用,通常為了解決在同一個(gè)方法中處理同一個(gè)變量時(shí)有很好的處理。
var productname="Sports Shoes";
$('#Area').bind('click',function(){
alert(productname);
});
productname="necklace",
$('#Area').bind('click',function(){
alert(productname);
});
由于變量productname被重新賦值,所以輸出的消息都是”necklace”,這里不了解可以去查閱下關(guān)于JavaScript的變量作用域,要 解決這個(gè)問(wèn)題就必須使用到data參數(shù),
var productname="Sports Shoes";
$('#Area').bind('click',{pn:productname},function(){
alert(event.data.pn);
});
productname="necklace",
$('#Area').bind('click',{pn:productname},function(){
alert(event.data.pn);
});
2. One
為每一個(gè)匹配元素的特定事件(像click)綁定一個(gè)一次性的事件處理函數(shù)。該方法與bind方法的參數(shù)一樣,與bind方法的區(qū)別就是只對(duì)匹配元素的事 件處理執(zhí)行一次,執(zhí)行完之后,以后再也不會(huì)執(zhí)行,當(dāng)然重新發(fā)起web請(qǐng)求時(shí)它又會(huì)執(zhí)行一次。
$('a').one('click',function(){
alert('a');
})
單擊頁(yè)面上的a元素后,彈出消息,除非用戶發(fā)起第二次請(qǐng)求,否則再次點(diǎn)擊a元素不會(huì)彈出消息對(duì)話框。
3. live
該方法主要是能處理動(dòng)態(tài)添加的元素,給那些后添加的元素也一樣綁定事件。
$('a').live('click,function(){
alert('show message!');
})
然后如果我添加一個(gè)元素,
$('body').appnend('Another Element');
那么該元素也會(huì)被觸發(fā)事件處理函數(shù)alert。
另外,jQuery還提供了一些綁定這些標(biāo)準(zhǔn)事件類型的簡(jiǎn)單方式,比如.click()用于簡(jiǎn)化.bind(‘click')。
一共有以下這些事件名稱:blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error 等。
- JQuery中綁定事件(bind())和移除事件(unbind())
- jQuery中的bind綁定事件與文本框改變事件的臨時(shí)解決方法
- jQuery中對(duì)未來(lái)的元素綁定事件用bind、live or on
- jQuery事件綁定on()、bind()與delegate() 方法詳解
- jquery bind(click)傳參讓列表中每行綁定一個(gè)事件
- jQuery綁定事件監(jiān)聽bind和移除事件監(jiān)聽unbind用法實(shí)例詳解
- JQuery入門——移除綁定事件unbind方法概述及應(yīng)用
- JQuery入門——用bind方法綁定事件處理函數(shù)應(yīng)用介紹
- jQuery中bind(),live(),delegate(),on()綁定事件方法實(shí)例詳解
- jQuery中的on與bind綁定事件區(qū)別實(shí)例詳解
- jQuery中綁定事件bind() on() live() one()的異同
- jQuery使用bind函數(shù)實(shí)現(xiàn)綁定多個(gè)事件的方法
相關(guān)文章
IE10中flexigrid無(wú)法顯示數(shù)據(jù)的解決方法
這篇文章主要介紹了IE10中flexigrid無(wú)法顯示數(shù)據(jù)的解決方法的相關(guān)資料,需要的朋友可以參考下2015-07-07jQuery動(dòng)畫效果-fadeIn fadeOut淡入淺出示例代碼
jQuery動(dòng)畫效果淡入淺出想必大家都有見到過(guò)吧,其實(shí)很很簡(jiǎn)單,通過(guò)fadeIn fadeOut方法便可輕松實(shí)現(xiàn),具體如下,喜歡的朋友可以參考下,希望對(duì)大家有所幫助2013-08-08jQuery判斷元素是否顯示 是否隱藏的簡(jiǎn)單實(shí)現(xiàn)代碼
下面小編就為大家?guī)?lái)一篇jQuery判斷元素是否顯示 是否隱藏的簡(jiǎn)單實(shí)現(xiàn)代碼。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05jQuery+AJAX實(shí)現(xiàn)遮罩層登錄驗(yàn)證界面(附源碼)
這篇文章主要介紹了jQuery+AJAX實(shí)現(xiàn)遮罩層登錄驗(yàn)證界面,并分享了源碼,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2015-10-10jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR錯(cuò)誤
今天測(cè)試偶然發(fā)現(xiàn)jquery.bgiframe.js在IE9環(huán)境下提示錯(cuò)誤,于是很是好奇,想辦法知道究竟,于是搜索了一下,現(xiàn)在與大家分享希望可以幫助你們2013-01-01jQuery實(shí)現(xiàn)動(dòng)態(tài)添加標(biāo)簽事件
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)動(dòng)態(tài)添加標(biāo)簽事件,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08jQuery使用hide方法隱藏頁(yè)面上指定元素的方法
這篇文章主要介紹了jQuery使用hide方法隱藏頁(yè)面上指定元素的方法,涉及jQuery使用hide隱藏元素的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03jquery.qtip提示信息插件用法簡(jiǎn)單實(shí)例
這篇文章主要介紹了jquery.qtip提示信息插件用法,結(jié)合簡(jiǎn)單實(shí)例形式分析了該插件用于顯示提示信息的相關(guān)使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06