事件在javascript中一直是最強大的物件之一。 javascript提供了addEventListener和attachEvent兩個方法來為DOM節點綁定事件，jquery作了進一步封裝，提供了相容各個瀏覽器的bind方法。現在來看，這種傳統的事件綁定方式有以下不足：
1.可能需要綁定很多的EventHander。
假如頁面中某個表有100行，現在必須為每一行綁定一個click事件。那麼就必須綁定100個EventHandler，這對頁面效能來說有著極大的負擔，因為需要創建更多的記憶體來存放這些Handler。
2.事件無法綁定後加入的DOM節點。
假如頁面中的程式碼如下：
複製代碼代碼如下:
$("#dv").bind('click',function(){alert('test');});
$(body).append('<div id="dv">test</div>')
後加入的div是無法觸發點擊事件的。
為了解決這兩個問題，javascript引入了事件代理（event proxy）。首先，我們來了解js中的冒泡機制。
基本上所有的瀏覽器都支援事件冒泡。當在某個DOM節點上觸發事件上，事件會一直向上傳遞，一直到文件的根節點。既然所有的節點的事件最終都會傳遞到文檔根節點，那麼我們如果直接將事件綁定到文檔根節點（document節點），然後透過event.target來判斷哪個節點觸發的事件，是不是減少很多EventHandler的綁定呢？
jquery中的live方法正式根據這個原理來實現的，下面我們來實作一個live簡單版：
複製代碼代碼如下:
$.fn.mylive=function(eventType,fn){
var that=this.selector;
$(document).bind(eventType,function(event){
var match=$(event.target).closest(that)
if(match.length !== 0){
fn.apply($(event.target),[event]);
}
})
}
$("#tb td").mylive('click',function(event){
alert(event.target.innerHTML);
});
var tb='<table id="tb"> /
<tr> /
<td>the first column</td>/
<td>the second column</td>/
<td>the third column</td>/
</tr>/
</table>';
$("body").append(tb);
在live方法中，事件綁定在document節點上，$(event.target).closest(that)來匹配真正觸發事件的元素。 demo中，我們為每個後加入的td都綁定了click事件，點擊不同的td，我們發現會彈出他們對應Text的提示框。
live方法彌補了前面提到的傳統事件綁定方法的兩個不足。但live方法仍存在它的不足之處。看這句程式碼：
複製代碼代碼如下:
$("#tb td").mylive('click',function(event){
alert(event.target.innerHTML);
});
它會先根據jquery選擇器遍歷整個文檔，找到所有的#tb td元素，將他們儲存成物件。然而，在live的實作方法中，並沒有利用這些對象，而僅僅是將"#td td"作為字串與事件來源進行匹配而已。這就大大增加了很多無謂的消耗。
那麼有沒有辦法改善這項狀況呢？ jquery中提供了delegate代理方法，它支援將事件綁定到指定的元素上，而不僅僅是document上。了解了它的原理，我們來實作一個delegate簡單版：
複製代碼代碼如下:
$(body).append('<div id="dv"></div>');
$.fn.mydelegate=function(selector,eventType,fn){
$(this).bind(eventType,function(event){
var match=$(event.target).closest(selector);
if(match.length !== 0){
fn.apply($(event.target),[event]);
}
});
}
$("#dv").mydelegate('td','click',function(event){
alert(event.target.innerHTML);
});
var tb='<table id="tb"> /
<tr> /
<td>the first column</td>/
<td>the second column</td>/
<td>the third column</td>/
</tr>/
</table>';
$("dv").append(tb);
mydeletage方法不需要取得所有的td對象，而只需要取得綁定事件的div對象。這在執行效率上要優於live方法。
這裡僅僅起到一個拋磚引玉的作用，讓大家了解到事件代理的原理而已，jquery中的live和delegate實現要複雜的多。