jQuery代码优化 事件委托篇


Posted in Javascript onNovember 01, 2011

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对应如下:
jQuery代码优化 事件委托篇

(注:本文基于《jQuery基础教程(第3版)》相关章节内容编撰而成,同时参考了

  • The Difference Between jQuery's .bind(), .live(), and .delegate()
  • bind() vs live() vs delegate() function
  • jQuery API)
Javascript 相关文章推荐
utf8的编码算法 转载
Dec 27 Javascript
(function($){...})(jQuery)的意思
Jul 22 Javascript
JavaScript 注册事件代码
Jan 27 Javascript
js自定义事件代码说明
Jan 31 Javascript
JavaScript实现的石头剪刀布游戏源码分享
Aug 22 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
Jan 11 Javascript
js图片加载效果实例代码(延迟加载+瀑布流加载)
May 12 Javascript
js学习心得_一个简单的动画库封装tween.js
Jul 14 Javascript
jQuery选择器特殊字符与属性空格问题
Aug 14 jQuery
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
JS实现中文汉字按拼音排序的方法
Oct 09 Javascript
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 jQuery
jQuery代码优化 遍历篇
Nov 01 #Javascript
jQuery代码优化 选择符篇
Nov 01 #Javascript
jQuery代码优化之基本事件
Nov 01 #Javascript
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
Oct 31 #Javascript
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
Oct 31 #Javascript
IE与Firefox在JavaScript上的7个不同句法分享
Oct 30 #Javascript
加载 Javascript 最佳实践
Oct 30 #Javascript
You might like
推荐php模板技术[转]
2007/01/04 PHP
获得Google PR值的PHP代码
2007/01/28 PHP
PHP操作文件方法问答
2007/03/16 PHP
几道坑人的PHP面试题 试试看看你会不会也中招
2014/08/19 PHP
php+ajax实时刷新简单实例
2015/02/25 PHP
使用xampp搭建运行php虚拟主机的详细步骤
2015/10/21 PHP
php 无限级分类 获取顶级分类ID
2016/03/13 PHP
飞鱼(shqlsl) javascript作品集
2006/12/16 Javascript
js 实现浏览历史记录示例
2014/04/20 Javascript
基于jquery的文字向上跑动类似跑马灯的效果
2014/09/22 Javascript
JavaScript生成二维码图片小结
2015/12/27 Javascript
JavaScript中用let语句声明作用域的用法讲解
2016/05/20 Javascript
详解Angular中$cacheFactory缓存的使用
2016/08/19 Javascript
Reactjs实现通用分页组件的实例代码
2017/01/19 Javascript
vue全局组件与局部组件使用方法详解
2018/03/29 Javascript
vue自定义一个v-model的实现代码
2018/06/21 Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
2018/08/24 Javascript
JavaScript中concat复制数组方法浅析
2019/01/20 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
2020/03/17 Javascript
微信小程序自定义顶部组件customHeader的示例代码
2020/06/03 Javascript
javascript 数组(list)添加/删除的实现
2020/12/17 Javascript
Python高级应用实例对比:高效计算大文件中的最长行的长度
2014/06/08 Python
在Windows8上的搭建Python和Django环境
2014/07/03 Python
Python 多核并行计算的示例代码
2017/11/07 Python
python3 flask实现文件上传功能
2020/03/20 Python
python3 requests库文件上传与下载实现详解
2019/08/22 Python
TensorFlow设置日志级别的几种方式小结
2020/02/04 Python
Python爬虫爬取新闻资讯案例详解
2020/07/14 Python
Python之多进程与多线程的使用
2021/02/23 Python
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
2017/07/11 HTML / CSS
代码中finally中的代码会不会执行
2012/02/06 面试题
“向国旗敬礼”活动策划方案(4篇)
2014/09/27 职场文书
2015年党支部公开承诺书
2015/01/22 职场文书
债务纠纷代理词
2015/05/25 职场文书
我收到了德劲DE1107
2022/04/05 无线电
默认网关不可用修复后过一会又不好使了解决方法
2022/04/08 数码科技