解析jQuery的三種bind/One/Live事件綁定使用方法_jquery

1. bind/Unbind
在jquery的事件模型中，有兩個(gè)基本的事件綁 定函數(shù)，bind與unbind，這兩個(gè)函數(shù)的含義就是匹配頁面元素進(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ì)象來一次綁定多 個(gè)事件處理函數(shù)。

$('a').bind({
click:function(){alert('a');},
mouseover:function(){alert('a again!')}

在function函數(shù)中，你還可以通過傳遞一個(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è)問題就必須使用到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');
})

單擊頁面上的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)事件類型的簡單方式，比如.click()用于簡化.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 等。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com