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 初体验(建议学习jquery)
Apr 25 Javascript
JavaScript 学习笔记(十五)
Jan 28 Javascript
js异常捕获方法介绍
Apr 10 Javascript
javascript操作表格排序实例分析
May 06 Javascript
JavaScript 对象深入学习总结(经典)
Sep 29 Javascript
解析ajaxFileUpload 异步上传文件简单使用
Dec 30 Javascript
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
Jun 14 Javascript
在Vue中获取组件声明时的name属性方法
Sep 12 Javascript
vue项目中使用vue-i18n报错的解决方法
Jan 13 Javascript
vue生命周期与钩子函数简单示例
Mar 13 Javascript
js实现有趣的倒计时效果
Jan 19 Javascript
arcgis.js控制地图地体的显示范围超出区域自动弹回(实现思路)
Jan 28 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
2021年最新CPU天梯图
2021/03/04 数码科技
IIS php环境配置PHP5 MySQL5 ZendOptimizer phpmyadmin安装与配置
2008/11/18 PHP
一个比较简单的PHP 分页分组类
2009/12/10 PHP
php curl基本操作详解
2013/07/23 PHP
php之Smarty模板使用方法示例详解
2014/07/08 PHP
PHP中使用strpos函数实现屏蔽敏感关键字功能
2014/08/21 PHP
使用IE的地址栏来辅助调试Web页脚本
2007/03/08 Javascript
jquery 锁定弹出层实现代码
2010/02/23 Javascript
基于jsTree的无限级树JSON数据的转换代码
2010/07/27 Javascript
更换select下拉菜单背景样式的实现代码
2011/12/20 Javascript
jquery 年会抽奖程序
2011/12/22 Javascript
jQuery圆形统计图开发实例
2015/01/04 Javascript
jQuery学习笔记之创建DOM元素
2015/01/19 Javascript
js给selected添加options的方法
2015/05/06 Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
2015/09/15 Javascript
JS常用算法实现代码
2016/11/14 Javascript
一道面试题引发的对javascript类型转换的思考
2017/03/06 Javascript
Vue组件通信实践记录(推荐)
2017/08/15 Javascript
Vue引入jquery实现平滑滚动到指定位置
2018/05/09 jQuery
JS常见面试试题总结【去重、遍历、闭包、继承等】
2019/08/27 Javascript
[41:52]2018DOTA2亚洲邀请赛3月29日小组赛B组Effect VS Secret
2018/03/30 DOTA
Python中使用PIPE操作Linux管道
2015/02/04 Python
Python中使用asyncio 封装文件读写
2016/09/11 Python
Python读取sqlite数据库文件的方法分析
2017/08/07 Python
python3下使用cv2.imwrite存储带有中文路径图片的方法
2018/05/10 Python
解决Python中pandas读取*.csv文件出现编码问题
2019/07/12 Python
Django mysqlclient安装和使用详解
2020/09/17 Python
一文带你了解Python 四种常见基础爬虫方法介绍
2020/12/04 Python
法律专业应届本科毕业生求职信
2013/10/25 职场文书
高中地理教学反思
2014/01/29 职场文书
优秀老员工获奖感言
2014/02/15 职场文书
个人批评与自我批评材料
2014/10/17 职场文书
具结保证书范本
2015/05/11 职场文书
高一地理教学工作总结
2015/08/12 职场文书
上帝为你开了一扇窗之Tkinter常用函数详解
2021/06/02 Python
Element实现动态表格的示例代码
2021/08/02 Javascript