本文例項講述了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","red");},   
  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",function(){/*顯示更多資訊*/});

使用.delegate()有如下優點（或者說解決了.live()方法的如下問題）：
直接將目標元素選擇符（"td"）、事件（"click"）及處理程式與“受拖方”$("#info_table")繫結，不額外收集元素、事件傳播路徑縮短、語義明確；

支援在連綴的DOM遍歷方法後面呼叫，即支援$("table").find("#info").delegate...，支援精確控制；

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

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

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