javascript中的事件代理初探


Posted in Javascript onMarch 08, 2014

事件在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 id="dv">test</div>')

后加入的div是无法触发点击事件的。

为了解决这两个问题,javascript引入了事件代理(event proxy)。首先,我们了解一下js中的冒泡机制。

javascript中的事件代理初探


基本上所有的浏览器都支持事件冒泡。当在某个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 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)来匹配真正触发事件的元素。demo中,我们为每个后加入的td都绑定了click事件,单击不同的td,我们发现会弹出他们对应Text的提示框。

live方法弥补了前面提到的传统事件绑定方法的两个不足。但live方法仍存在它的不足之处。看这句代码:

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

它会首先根据jquery选择器遍历整个文档,找到所有的#tb td元素,将他们存储成对象。然而,在live的实现方法中,并没有利用这些对象,而仅仅是将"#td td"作为字符串与事件源进行匹配而已。这就大大增加了很多无谓的消耗。

那么有没有办法改善这一状况呢?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);

mydeletage方法不需要获取所有的td对象,而仅仅只需要获取绑定事件的div对象。这在执行效率上要优于live方法。

这里仅仅起到一个抛砖引玉的作用,让大家了解到事件代理的原理而已,jquery中的live和delegate实现要复杂的多。

Javascript 相关文章推荐
Jquery实现弹出层分享微博插件具备动画效果
Apr 03 Javascript
JS判断对象是否存在的10种方法总结
Dec 23 Javascript
jquery实现的鼠标拖动排序Li或Table
May 04 Javascript
jscript读写二进制文件的方法
Apr 22 Javascript
jQuery+css实现的切换图片功能代码
Jan 27 Javascript
AnjularJS中$scope和$rootScope的区别小结
Sep 18 Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
Oct 21 Javascript
jQuery联动日历的实例解析
Dec 02 Javascript
JS计算两个时间相差分钟数的方法示例
Jan 10 Javascript
jquery+css实现Tab栏切换的代码实例
May 14 jQuery
微信小程序 Storage更新详解
Jul 16 Javascript
vue 实现强制类型转换 数字类型转为字符串
Nov 07 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
Mar 08 #Javascript
Extjs表单常见验证小结
Mar 07 #Javascript
extJS中常用的4种Ajax异步提交方式
Mar 07 #Javascript
禁用JavaScript控制台调试的方法
Mar 07 #Javascript
jquery日历控件实现方法分享
Mar 07 #Javascript
jquery.form.js用法之清空form的方法
Mar 07 #Javascript
jquery设置按钮停顿3秒不可用
Mar 07 #Javascript
You might like
PHP源代码数组统计count分析
2011/08/02 PHP
php中try catch捕获异常实例详解
2014/11/21 PHP
php实现读取内存顺序号
2015/03/29 PHP
php提交post数组参数实例分析
2015/12/17 PHP
php结合mysql与mysqli扩展处理事务的方法
2016/06/29 PHP
Django中通过定时任务触发页面静态化的处理方式
2018/08/29 PHP
Windows Live的@live.com域名注册漏洞 利用代码
2006/12/27 Javascript
一个js拖拽的效果类和dom-drag.js浅析
2010/07/17 Javascript
使用JavaScript检测Firefox浏览器是否启用了Firebug的代码
2010/12/28 Javascript
40个新鲜出炉的jQuery 插件和免费教程[上]
2012/07/24 Javascript
把jquery 的dialog和ztree结合实现步骤
2013/08/02 Javascript
使用js写的一个简易的投票
2013/11/27 Javascript
JavaScript中九种常用排序算法
2014/09/02 Javascript
js跨域请求的5中解决方式
2015/07/02 Javascript
自动完成的搜索框javascript实现
2016/02/26 Javascript
基于javascript bootstrap实现生日日期联动选择
2016/04/07 Javascript
利用vue.js插入dom节点的方法
2017/03/15 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
2017/04/05 Javascript
node.js调用Chrome浏览器打开链接地址的方法
2017/05/17 Javascript
Vue组件全局注册实现警告框的实例详解
2018/06/11 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
2018/07/31 Javascript
Promise扫盲贴
2019/06/24 Javascript
使用VScode 插件debugger for chrome 调试react源码的方法
2019/09/13 Javascript
使用Python监控文件内容变化代码实例
2018/06/04 Python
flask-restful使用总结
2018/12/04 Python
在pycharm中使用git版本管理以及同步github的方法
2019/01/16 Python
Python给图像添加噪声具体操作
2019/03/03 Python
python利用openpyxl拆分多个工作表的工作簿的方法
2019/09/27 Python
改变 Python 中线程执行顺序的方法
2020/09/24 Python
一道Delphi面试题
2016/10/28 面试题
采购主管工作职责
2013/12/12 职场文书
个人投资合作协议书
2014/10/12 职场文书
2015年行政人事部工作总结
2015/05/13 职场文书
Python列表删除重复元素与图像相似度判断及删除实例代码
2021/05/07 Python
小程序实现文字循环滚动动画
2021/06/14 Javascript
Java生成读取条形码和二维码的简单示例
2021/07/09 Java/Android