jQuery代码优化 事件委托篇

<转自 http://www.jb51.net/article/28770.htm>

参考文章:  解密jQuery事件核心 - 绑定设计（一）

参考文章:  解密jQuery事件核心 - 绑定设计（二）

 

jQuery为绑定和委托事件提供了.bind()、.live()和.delegate()方法。本文在讨论这几个方法内部实现的基础上，展现它们的优劣势及适用场合。 

事件委托 

事件委托的事例在现实当中比比皆是。好比，有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三我的在公司门口等快递；二是委托给前台MM代为签收。现实当中，咱们大都采用委托的方案（公司也不会容忍那么多员工站在门口就为了等快递）。前台MM收到快递后，她会判断收件人是谁，而后按照收件人的要求签收，甚至代为付款。这种方案还有一个优点，那就是即便公司里来了新员工（无论多少），前台MM也会在收到寄给新员工的快递后核实并代为签收。 

咱们知道，DOM在为页面中的每一个元素分派事件时，相应的元素通常都在事件冒泡阶段处理事件。在相似 body > div > a 这样的结构中，若是单击a元素，click事件会从a一直冒泡到div和body（即document对象）。所以，发生在a上面的单击事件，div和body元素一样能够处理。而利用事件传播（这里是冒泡）这个机制，就能够实现事件委托。具体来讲，事件委托就是事件目标自身不处理事件，而是把处理任务委托给其父元素或者祖先元素，甚至根元素（document）。 

.bind() 
假设有一个多行多列的表格，咱们想让用户单击每一个单元格都能看到与其中内容相关的更多信息（好比，经过提示条）。为此，能够为每一个单元格都绑定click事件： 

$("info_table td").bind("click", function(){/*显示更多信息*/}); 

问题是，若是表格中要绑定单击事件的有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，那么就执行委托给它的处理程序。 

.live() 
到目前为止，一切彷佛很完美。惋惜，事实并不是如此。由于.live()方法并不完美，它有以下几个主要缺点： 

$()函数会找到当前页面中的全部td元素并建立jQuery对象，但在确认事件目标时却不用这个td元素集合，而是使用选择符表达式与event.target或其祖先元素进行比较，于是生成这个jQuery对象会形成没必要要的开销； 
默认把事件绑定到$(document)元素，若是DOM嵌套结构很深，事件冒泡经过大量祖先元素会致使性能损失； 
只能放在直接选择的元素后面，不能在连缀的DOM遍历方法后面使用，即$("#infotable td").live...能够，但$("#infotable").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)变成了$("#infotable")[0]，节省了冒泡的旅程。不过，与.live()共同使用的上下文参数必须是一个单独的DOM元素，因此这里指定上下文对象时使用的是$("#infotable")[0]，即便用数组的索引操做符来取得的一个DOM元素。 

.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()阻止了事件传播，那么事件委托就会失效。 

结论 
在下列状况下，应该使用.live()或.delegate()，而不能使用.bind()： 

为DOM中的不少元素绑定相同事件； 
为DOM中尚不存在的元素绑定事件； 

PS：根据jQuery 1.7 Beta 1的发版说明，jQuery 1.7为了解决.bind()、.live()和.delegate()并存形成的不一致性问题，将会增长一对新的事件方法：.on()和.off()：
$(elems).on(events, selector, data, fn);
$(elems).off(events, selector, fn);
若是指定selector，则为事件委托；不然，就是常规绑定。新旧API对应以下：