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 相关文章推荐
新闻内页-JS分页
Jun 07 Javascript
prototype 1.5相关知识及他人笔记
Dec 16 Javascript
北京奥运官方网站幻灯切换效果flash版打包下载
Jan 30 Javascript
javascript控制frame,iframe的src属性代码
Dec 31 Javascript
js数组的基本用法及数组根据下标(数值或字符)移除元素
Oct 20 Javascript
详解在Angularjs中ui-sref和$state.go如何传递参数
Apr 24 Javascript
vue2 前端搜索实现示例
Feb 26 Javascript
解决vue+webpack打包路径的问题
Mar 06 Javascript
讲解vue-router之什么是嵌套路由
May 28 Javascript
node.js使用express框架进行文件上传详解
Mar 03 Javascript
vue模仿网易云音乐的单页面应用
Apr 24 Javascript
Vue-resource安装过程及使用方法解析
Jul 21 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』PHP截断函数mb_substr()使用介绍
2013/04/22 PHP
PHP字符串逆序排列实现方法小结【strrev函数,二分法,循环法,递归法】
2017/01/13 PHP
设定php简写功能的方法
2019/11/28 PHP
prototype 源码中文说明之 prototype.js
2006/09/22 Javascript
JavaScript实现鼠标滑过处生成气泡的方法
2015/05/16 Javascript
基于jQuery+JSON的省市二三级联动效果
2015/06/05 Javascript
又一款js时钟!transform实现时钟效果
2016/08/15 Javascript
layer弹出层全屏及关闭方法
2018/08/17 Javascript
vue的三种图片引入方式代码实例
2019/11/19 Javascript
JavaScript简易计算器制作
2020/01/17 Javascript
jQuery加PHP实现图片上传并提交的示例代码
2020/07/16 jQuery
浅谈JavaScript窗体Window.ShowModalDialog使用
2020/07/22 Javascript
nuxt引入组件和公共样式的操作
2020/11/05 Javascript
使用PYTHON创建XML文档
2012/03/01 Python
python显示生日是星期几的方法
2015/05/27 Python
Python设计模式编程中解释器模式的简单程序示例分享
2016/03/02 Python
python构建自定义回调函数详解
2017/06/20 Python
python中将zip压缩包转为gz.tar的方法
2018/10/18 Python
Python中实现单例模式的n种方式和原理
2018/11/14 Python
Python Scapy随心所欲研究TCP协议栈
2018/11/20 Python
Django app配置多个数据库代码实例
2019/12/17 Python
tensorflow estimator 使用hook实现finetune方式
2020/01/21 Python
加拿大时尚潮流大码女装购物网站:Addition Elle
2018/04/02 全球购物
荷兰度假屋租赁网站:Aan Zee
2020/02/28 全球购物
摩飞电器俄罗斯官方网站:Morphy Richards俄罗斯
2020/07/30 全球购物
分布式数据库需要考虑哪些问题
2013/12/08 面试题
高中生学习生活的自我评价
2013/10/09 职场文书
历史学专业个人的自我评价
2013/10/13 职场文书
小学生安全保证书
2014/02/01 职场文书
十佳护士先进事迹
2014/05/08 职场文书
2015年社区综治工作总结
2015/04/21 职场文书
担保书格式范文
2015/09/22 职场文书
2015年成本会计工作总结
2015/10/14 职场文书
旅游安全责任协议书
2016/03/22 职场文书
如何打开Win11系统注册表编辑器?Win11注册表编辑器打开修复方法
2022/04/05 数码科技
Pytorch中expand()的使用(扩展某个维度)
2022/07/15 Python