JavaScript事件代理原理：从live到delegate的演进

传统事件绑定的局限性

在JavaScript开发中，事件处理一直是核心且强大的功能之一。原生JavaScript提供了addEventListener和attachEvent两种方法来为DOM节点绑定事件，而jQuery在此基础上进行了封装，提供了兼容各浏览器的bind方法。然而，回顾这种传统的事件绑定方式，可以发现其存在明显的局限性：

首先，可能需要绑定大量的EventHandler。

例如，若页面中某个表格包含100行数据，且需要为每一行绑定click事件，则必须创建并绑定100个EventHandler。这将给页面性能带来巨大负担，因为系统需要分配更多内存来存储这些处理函数。

其次，传统方式无法为后续动态添加的DOM节点绑定事件。

假设页面执行以下代码：

$("#dv").bind('click',function(){alert('test');});
$(body).append('<div id="dv">test</div>')

此时，后加入的div元素无法触发之前绑定的点击事件。

事件代理与冒泡机制

为解决上述两个问题，JavaScript引入了事件代理（event proxy）机制。首先，我们需要理解JavaScript中的事件冒泡机制。

目前几乎所有浏览器都支持事件冒泡。当在某个DOM节点上触发事件时，该事件会向上传递，直至文档的根节点。既然所有节点的事件最终都会冒泡到文档根节点，那么如果我们将事件直接绑定到文档根节点（document节点），并通过event.target来判断具体是哪个子节点触发了事件，是否就能大幅减少EventHandler的绑定数量呢？

jQuery live方法原理与缺陷

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]);
  }
 })
}
（代码块结束，此处为后续演示代码）
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)来匹配真正触发事件的元素。在演示示例中，我们为每个后加入的td元素绑定了click事件。单击不同的td时，会弹出对应文本内容的提示框，验证了动态节点的事件捕获能力。

live方法虽然弥补了传统事件绑定方法的两个不足，但它自身仍存在性能缺陷。请看以下代码：

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

该实现首先会根据jQuery选择器遍历整个文档，查找所有匹配#tb td的元素，并将它们存储为对象集合。然而，在live的具体实现逻辑中，这些预先查找的对象并未被直接利用，仅仅是将"#tb td"选择器字符串与事件源进行后续匹配。这种机制导致了大量的无用计算和性能消耗。

jQuery delegate方法优化

那么，是否有办法改善这一状况呢？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);

mydelegate方法无需获取所有td元素对象，仅需获取绑定事件的div父对象即可。这种机制在执行效率上明显优于live方法。

此处仅起到抛砖引玉的作用，旨在展示事件代理的基本原理。实际上，jQuery中live和delegate的内部实现要复杂得多，涉及更多边界条件处理。