jQuery的三种bind/One/Live事件绑定使用方法
jQuery是 一款優秀的JavaScript框架,在舊版裡主要用bind()方法,在新版裡又多了兩種One(),Live(),下面介紹這幾種方法的使用:
1. bind/Unbind
在jquery的事件模型中,有兩個基本的事件綁 定函數,bind與unbind,這兩個函數的含義就是匹配頁面元素進行相關事件的處理。比如我們在JS中經常使用到的 onfocus,onblur,onmouseover,onmousedown等事件都可以作為bind的參數進行傳遞。
$("#id").bind('click',function(){alert('tt!')});
其中bind的第一個參數代表的含義是:事件類型(注意不需要加on),function中的代碼就是你要執行的邏輯
代碼
多個事件綁定:bind還允許你綁定多個事件,事件名字之間用空格隔開,例如:
$('a').bind('click mouseover',function(){
在最新的jquery1.4版本中,對bind方法進行了改進,你可以在bind方法傳入一個類JSON物件來一次綁定多 個事件處理函數。
$('a').bind({
click:function(){alert('a');},
mouseover:function(){alert('a again!')}
在function函數中,你還可以通過傳遞一個javaScript對 象給function方法,這個事件物件通常是可以省略的。
bind中還有一個參數data, 該參數一般情況下很少使用,通常為瞭解決在同一個方法中處理同一個變數時有很好的處理。
var productname="Sports Shoes";
$('#Area').bind('click',function(){
alert(productname);
});
productname="necklace",
$('#Area').bind('click',function(){
alert(productname);
});
由於變數productname被重新賦值,所以輸出的消息都是”necklace”,這裡不瞭解可以去查閱下關於JavaScript的變數作用域,要 解決這個問題就必須使用到data參數,
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
為每一個匹配元素的特定事件(像click)綁定一個一次性的事件處理函數。該方法與bind方法的參數一樣,與bind方法的區別就是只對匹配元素的事
件處理執行一次,執行完之後,以後再也不會執行,當然重新發起web請求時它又會執行一次。
$('a').one('click',function(){
alert('a');
})
按一下頁面上的a元素後,彈出消息,除非使用者發起第二次請求,否則再次點擊a元素不會彈出消息對話方塊。
3. live
該方法主要是能處理動態添加的元素,給那些後添加的元素也一樣綁定事件。
$('a').live('click,function(){
alert('show message!');
})
然後如果我添加一個元素,
$('body').appnend('Another Element');
那麼該元素也會被觸發事件處理函數alert。
另外,jQuery還提供了一些綁定這些標準事件類型的簡單方式,比如.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 等。
0 留言