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

本篇文章介紹了,關於jQuery新的事件綁定機制on()的使用技巧。需要的朋友參考下
 

今天瀏覽jQuery的deprecated列表,發現live()和die()在裏面了,趕緊看了一下,發現從jQuery1.7開始,jQuery引入了全新的事件綁定機制,on()和off()兩個函數統一處理事件綁定。因爲在此之前有bind(), 
live(), 
delegate()等方法來處理事件綁定,jQuery從性能優化以及方式統一方面考慮決定推出新的函數來統一事件綁定方法並且替換掉以前的方法。

on(events,[selector],[data],fn)

events:一個或多個用空格分隔的事件類型和可選的命名空間,如"click"或"keydown.myPlugin" 。

selector:一個選擇器字符串用於過濾器的觸發事件的選擇器元素的後代。如果選擇器爲null或省略,當它到達選定的元素,事件總是觸發。

data:當一個事件被觸發時要傳遞event.data給事件處理函數。

fn:該事件被觸發時執行的函數。 false 值也可以做一個函數的簡寫,返回false。

替換bind()

當第二個參數'selector'爲null時,on()和bind()其實在用法上基本上沒有任何區別了,所以我們可以認爲on()只是比bind()多了一個可選的'selector'參數,所以on()可以非常方便的換掉bind()

替換live()

在1.4之前相信大家非常喜歡使用live(),因爲它可以把事件綁定到當前以及以後添加的元素上面,當然在1.4之後delegate()也可以做類似的事情了。live()的原理很簡單,它是通過document進行事件委派的,因此我們也可以使用on()通過將事件綁定到document來達到live()一樣的效果。

 

live()寫法

 $('#list li').live('click', '#list li', 
function() {
    //function code here.
}); 

on()寫法

$(document).on('click', '#list li', 
function() {
    //function code 
here.
});

這裏的關鍵就是第二個參數'selector'在起作用了。它是一個過濾器的作用,只有被選中元素的後代元素纔會觸發事件。

替換delegate()
delegate()是1.4引入的,目的是通過祖先元素來代理委派後代元素的事件綁定問題,某種程度上和live()優點相似。只不過live()是通過document元素委派,而delegate則可以是任意的祖先節點。使用on()實現代理的寫法和delegate()基本一致。

 

delegate()的寫法

$('#list').delegate('li', 'click', 
function() {
    //function code here.
});

on()寫法

$('#list').on('click', 'li', function() 
{
    //function code here.
});

貌似第一個和第二個參數的順序顛倒了一下,別的基本一樣。

總結
jQuery推出on()的目的有2個,一是爲了統一接口,二是爲了提高性能,所以從現在開始用on()替換bind(), 
live(), 
delegate吧。尤其是不要再用live()了,因爲它已經處於不推薦使用列表了,隨時會被幹掉。如果只綁定一次事件,那接着用one()吧,這個沒有變化。

 

 

 

 

 

 

 

 

 

 

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 等。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章