事件在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>test</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> /
  <tr> /
   <td>the first column</td>/
   <td>the second column</td>/
   <td>the third column</td>/
  </tr>/
</table>';
$("body").append(tb);

live方法彌補了前面提到的傳統事件綁定方法的兩個不足。但live方法仍存在它的不足之處。看這句代碼：

復制代碼 代碼如下:

$("#tb td").mylive('click',function(event){
 alert(event.target.innerHTML);
});

那么有沒有辦法改善這一狀況呢？jquery中提供了delegate代理方法，它支持將事件綁定到指定的元素上，而不僅僅是document上。了解了它的原理，我們來實現一個delegate簡單版：

復制代碼 代碼如下:

$(body).append('<div></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> /
  <tr> /
   <td>the first column</td>/
   <td>the second column</td>/
   <td>the third column</td>/
  </tr>/
</table>';
$("dv").append(tb);

這里僅僅起到一個拋磚引玉的作用，讓大家了解到事件代理的原理而已，jquery中的live和delegate實現要復雜的多。