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 api参考 visualjquery 中国线路 速度快
Nov 30 Javascript
jQuery遍历Form示例代码
Sep 03 Javascript
javascript中clone对象详解
Dec 03 Javascript
jQuery菜单插件superfish使用指南
Apr 21 Javascript
简单的JS轮播图代码
Jul 18 Javascript
基于Bootstrap的Java开发问题汇总(Spring MVC)
Jan 15 Javascript
jquery dialog获取焦点的方法
Feb 09 Javascript
mpvue跳转页面及注意事项
Aug 03 Javascript
利用Promise自定义一个GET请求的函数示例代码
Mar 20 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
Vue实现返回顶部按钮实例代码
Oct 21 Javascript
深入了解Vue3模板编译原理
Nov 19 Vue.js
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
set_include_path和get_include_path使用及注意事项
2013/02/02 PHP
复制Input内容的js代码_支持所有浏览器,修正了Firefox3.5以上的问题
2010/06/21 Javascript
Jquery中获取iframe的代码
2011/01/11 Javascript
获取客户端电脑日期时间js代码(jquery)
2012/09/12 Javascript
web性能优化之javascript性能调优
2012/12/28 Javascript
jfinal与bootstrap的登录跳转实战演习
2015/09/22 Javascript
学习JavaScript设计模式之状态模式
2016/01/08 Javascript
原生js的数组除重复简单实例
2016/05/24 Javascript
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
2016/08/02 Javascript
详解Bootstrap的iCheck插件checkbox和radio
2016/08/24 Javascript
JS类的定义与使用方法深入探索
2016/11/26 Javascript
分享一个精简的vue.js 图片lazyload插件实例
2017/03/13 Javascript
zTree树形插件异步加载方法详解
2017/06/14 Javascript
Vue实现数据表格合并列rowspan效果
2020/11/30 Javascript
Vue实现回到顶部和底部动画效果
2019/07/31 Javascript
Vue自定义render统一项目组弹框功能
2020/06/07 Javascript
vue实现放大镜效果
2020/09/17 Javascript
python爬虫入门教程之点点美女图片爬虫代码分享
2014/09/02 Python
在Python的循环体中使用else语句的方法
2015/03/30 Python
实例探究Python以并发方式编写高性能端口扫描器的方法
2016/06/14 Python
对python添加模块路径的三种方法总结
2018/10/16 Python
pytorch实现Tensor变量之间的转换
2020/02/17 Python
使用opencv识别图像红色区域,并输出红色区域中心点坐标
2020/06/02 Python
俄罗斯旅游网站:Tripadvisor俄罗斯
2017/03/21 全球购物
C#的几个面试问题
2016/05/22 面试题
保险专业自荐信范文
2014/02/20 职场文书
保护环境建议书400字
2014/05/13 职场文书
大学生就业求职信
2014/06/12 职场文书
简单租房协议书范本
2014/08/20 职场文书
村干部四风问题整改措施
2014/09/30 职场文书
个人合伙协议书范本
2014/10/14 职场文书
王亚平太空授课观后感
2015/06/12 职场文书
公司保密管理制度
2015/08/04 职场文书
老干部局2015年度工作总结
2015/10/22 职场文书
优质护理服务心得体会
2016/01/22 职场文书
Django 如何实现文件上传下载
2021/04/08 Python