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 相关文章推荐
json数据与字符串的相互转化示例
Sep 18 Javascript
js的Boolean对象初始值示例
Mar 04 Javascript
JavaScript验证18位身份证号码最后一位正确性的实现代码
Aug 07 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
Jun 10 Javascript
jQuery检查事件是否触发的方法
Jun 26 Javascript
JavaScript如何获取数组最大值和最小值
Nov 18 Javascript
基于javascript实现句子翻牌网页版小游戏
Mar 23 Javascript
bootstrap3 兼容IE8浏览器!
May 02 Javascript
Ionic+AngularJS实现登录和注册带验证功能
Feb 09 Javascript
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
Jun 20 Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
Jun 17 Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
Nov 21 Javascript
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
异世界新番又来了,同样是从零开始,男主的年龄降到5岁
2020/04/09 日漫
QQ登录 PHP OAuth示例代码
2011/07/20 PHP
php中替换字符串中的空格为逗号','的方法
2014/06/09 PHP
PHP 只允许指定IP访问(允许*号通配符过滤IP)
2014/07/08 PHP
详解PHP的Laravel框架中Eloquent对象关系映射使用
2016/02/26 PHP
php实现图片按比例截取的方法
2017/02/06 PHP
JavaScript代码简单实现求杨辉三角给定行的最大值
2013/10/29 Javascript
jQuery中outerWidth()方法用法实例
2015/01/19 Javascript
JavaScript动态修改背景颜色的方法
2015/04/16 Javascript
IE浏览器下PNG相关功能
2015/07/05 Javascript
javascript实现超炫的向上滑行菜单实例
2015/08/03 Javascript
js判断当前页面在移动设备还是在PC端中打开
2016/01/06 Javascript
JavaScript的函数式编程基础指南
2016/03/19 Javascript
很棒的Bootstrap选项卡切换效果
2016/07/01 Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
2017/02/17 Javascript
JS实现按钮颜色切换效果
2020/09/05 Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
2017/11/28 Javascript
laydate时间日历插件使用方法详解
2018/11/14 Javascript
vue中eslintrc.js配置最详细介绍
2018/12/21 Javascript
基于Node的Axure文件在线预览的实现代码
2019/08/28 Javascript
深入理解javascript prototype的相关知识
2019/09/19 Javascript
python批量下载网站马拉松照片的完整步骤
2018/12/05 Python
python matplotlib折线图样式实现过程
2019/11/04 Python
Python解压 rar、zip、tar文件的方法
2019/11/19 Python
Python中sorted()排序与字母大小写的问题
2020/01/14 Python
CSS教程:CSS3圆角属性
2009/04/02 HTML / CSS
程序设计HTML5 Canvas API
2013/04/08 HTML / CSS
Pat McGrath Labs官网:世界上最有影响力的化妆师推出的彩妆品牌
2018/01/07 全球购物
社区优秀志愿者材料
2014/02/02 职场文书
《我的信念》教学反思
2014/02/15 职场文书
保密协议书范本
2014/04/22 职场文书
法律顾问服务方案
2014/05/15 职场文书
爱我中华演讲稿
2014/05/20 职场文书
2014年个人思想工作总结
2014/11/27 职场文书
教师节老师寄语
2015/05/28 职场文书
浅谈Redis跟MySQL的双写问题解决方案
2022/02/24 Redis