首頁  >  文章  >  web前端  >  jQuery事件綁定與委託實例_jquery

jQuery事件綁定與委託實例_jquery

WBOY
WBOY原創
2016-05-16 16:30:251190瀏覽

本文實例講述了jQuery事件綁定和委託。分享給大家供大家參考。具體方法如下:

jQuery事件的綁定和委託可以用多種方法實現,on()  、 bind()  、 live()  、 delegate() ,還有one()。
 
有時我們可能會像下面這樣綁定一個事件:

複製程式碼 程式碼如下:
$("#div1").click(function() { 
    alert("點擊後觸發"); 
});

上面的事件綁定,我們可以用多種方式去實現:
 
1. on()

複製程式碼 程式碼如下:
//無資料參數 
$("p").on("click", function(){ 
alert( $(this).text() ); 
}); 
 
//有資料參數 
function myHandler(event) { 
alert(event.data.foo); 

$("p").on("click", {foo: "bar"}, myHandler)

與on()對應的是off(),用來移除事件綁定:

複製程式碼 程式碼如下:
var foo = function () { 
  // code to handle some kind of event 
}; 
// ... now foo will be called when paragraphs are clicked ... 
$("body").on("click", "p", foo); 
 
// ... foo will no longer be called. 
$("body").off("click", "p", foo);

off():移除on()進行的綁定
one():只綁定一次。
 
2. bind()

參數:
(type,[data],function(eventObject))
type: 含​​有一個或多個事件類型的字串,由空格分隔多個事件。例如"click"或"submit",還可以是自訂事件名稱。
data:作為event.data屬性值傳遞給事件物件的額外資料物件
 
fn:綁定到每個符合元素的事件上面的處理函數
 
(type,[data],false)
type:含有一個或多個事件類型的字串,由空格分隔多個事件。例如"click"或"submit",還可以是自訂事件名稱。
data:作為event.data屬性值傳遞給事件物件的額外資料物件
 
false: 將第三個參數設為false會使預設的動作失效。
 
同時綁定多個事件類型:

複製程式碼 程式碼如下:
$('#foo').bind('mouseenter mouseleave', function() { 
  $(this).toggleClass('entered'); 
});

同時綁定多個事件類型/處理程序:

複製程式碼 程式碼如下:
$("button").bind({ 
  click:function(){$("p").slideToggle();}, 
  mouseover:function(){$("body").css("background-color","re​​d");},   
  mouseout:function(){$("body").css("background-color","#FFFFFF");}   
});

你可以在事件處理前傳遞一些附加的資料。

複製程式碼 程式碼如下:
function handler(event) { 
  alert(event.data.foo); 

$("p").bind("click", {foo: "bar"}, handler)


透過傳回false來取消預設的行為並阻止事件起泡。

複製程式碼 程式碼如下:
$("form").bind("submit", function() { return false; })

bind存在的問題

如果表格中要綁定點擊事件的有10列500行,那麼查找和遍歷5000個單元格會導致腳本執行速度明顯變慢,而保存5000個td元素和相應的事件處理程序也會佔用大量記憶體(類似於讓每個人親自站在門口等快遞)。

在前面這個例子的基礎上,如果我們想實現一個簡單的相簿應用,每頁只顯示50張照片的縮圖(50個單元格),用戶點擊「第x頁」(或「下一頁」)連結可以透過Ajax從伺服器動態載入另外50張照片。在這種情況下,似乎使用.bind()方法為50個單元格綁定事件又可以接受了。

事實卻不然。使用.bind()方法只會給第一頁中的50個儲存格綁定點擊事件,動態載入的後續頁面中的儲存格都不會有這個點擊事件。換句話說,.bind()只能給呼叫它的時候已經存在的元素綁定事件,不能給未來新增的元素綁定事件(類似新來的員工收不到快遞)。

事件委託可以解決上述兩個問題。具體到程式碼上,只要用jQuery 1.3新增的.live()方法取代.bind()方法即可:

複製程式碼 程式碼如下:
$("#info_table td").live("click",function() {/*顯示更多資訊*/});

這裡的.live()方法會把click事件綁定到$(document)物件(但這點從程式碼中體現不出來,這也是.live()方法飽受批評的一個重要原因,稍後再詳細討論),而且只需要給$(document)綁定一次(不是50次,更不是5000次),然後就能夠處理後續動態載入的照片儲存格的點擊事件。在接收到任何事件時,$(document)物件都會檢查事件類型和事件目標,如果是click事件且事件目標是td,那麼就執行委託給它的處理程序。
 
unbind():移除bind進行的綁定。
 
3. live()

到目前為止,一切似乎都很完美。可惜,事實並非如此。因為.live()方法並不完美,它有以下幾個主要缺點:
$()函數會找到目前頁面中的所有td元素並建立jQuery對象,但在確認事件目標時卻不用這個td元素集合,而是使用選擇符表達式與event.target或其祖先元素進行比較,因而產生這個jQuery物件會造成不必要的開銷;
預設把事件綁定到$(document)元素,如果DOM嵌套結構很深,事件冒泡通過大量祖先元素會導致效能損失;
只能放在直接選擇的元素後面,不能在連綴的DOM遍歷方法後面使用,即$("#info_table td").live...可以,但$("#info_table").find("td" ).live...不行;
收集td元素並建立jQuery對象,但實際操作的卻是$(document)對象,令人費解。
解決之道
為了避免產生不必要的jQuery對象,可以使用一種叫做「早期委託」的hack,即在$(document).ready()方法外部呼叫.live():

複製程式碼 程式碼如下:
(function($){ 
    $("#info_table td").live("click",function(){/*顯示更多資訊*/}); 
})(jQuery);

在此,(function($){...})(jQuery)是一個“立即執行的匿名函數”,構成了一個閉包,可以防止命名衝突。在匿名函數內部,$參數引用jQuery物件。這個匿名函數不會等到DOM就緒就會執行。注意,使用這個hack時,腳本必須是在頁面的head元素中連結和(或)執行的。之所以選擇這個時機,因為這時候剛好document元素可用,而整個DOM還遠未生成;如果把腳本放在結束的body標籤前面,就沒有意義了,因為那時候DOM已經完全可用了。

為了避免事件冒泡造成的效能損失,jQuery從1.4開始支援在使用.live()方法時配合使用一個上下文參數:

複製程式碼 程式碼如下:
$("td",$("#info_table")[0]). live("click",function(){/*顯示更多資訊*/});

這樣,「受託方」就從預設的$(document)變成了$("#info_table")[0],節省了冒泡的旅程。不過,與.live()共同使用的上下文參數必須是單獨的DOM元素,所以這裡指定上下文物件時使用的是$("#info_table")[0],也就是使用陣列的索引運算子來取得的一個DOM元素。 
 
4. delegate()

如前所述,為了突破單一.bind()方法的局限性,實現事件委託,jQuery 1.3引入了.live()方法。後來,為解決「事件傳播鏈」過長的問題,jQuery 1.4又支援為.live()方法指定上下文物件。而為了解決無謂生成元素集合的問題,jQuery 1.4.2乾脆直接引入了一個新方法.delegate()。
 
使用.delegate(),前面的範例可以這樣寫:

複製程式碼 程式碼如下:
$("#info_table").delegate("td","click",>$("#info_table").delegate("td","click", function(){/*顯示更多資訊*/});

使用.delegate()有以下優點(或解決了.live()方法的以下問題):
直接將目標元素選擇符("td")、事件("click")及處理程序與「受拖方」$("#info_table")綁定,不額外收集元素、事件傳播路徑縮短、​​語意明確;

支援在連綴的DOM遍歷方法後面調用,即支援$("table").find("#info").delegate...,支援精確控制;

可見,.delegate()方法是一個相對完美的解決方案。但在DOM結構簡單的情況下,也可以使用.live()。

提示:使用事件委託時,如果註冊到目標元素上的其他事件處理程序使用.stopPropagation()阻止了事件傳播,那麼事件委託就會失效。
 
undelegate(): 移除delegate的綁定

希望本文所述對大家的jQuery程式設計有所幫助。

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn