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 相关文章推荐
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
Aug 06 Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
Dec 08 Javascript
jQuery实现向下滑出的二级菜单效果实例
Aug 22 Javascript
Node.js操作Firebird数据库教程
Mar 04 Javascript
js获取当前周、上一周、下一周日期
Mar 19 Javascript
深入浅析Node.js单线程模型
Jul 10 Javascript
JS+canvas画一个圆锥实例代码
Dec 13 Javascript
webpack配置打包后图片路径出错的解决
Apr 26 Javascript
javascript中如何判断类型汇总
May 14 Javascript
VUE+elementui面包屑实现动态路由详解
Nov 04 Javascript
jQuery开发仿QQ版音乐播放器
Jul 10 jQuery
vue-quill-editor插入图片路径太长问题解决方法
Jan 08 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
PHP 变量定义和变量替换的方法
2009/07/30 PHP
php开启安全模式后禁用的函数集合
2011/06/26 PHP
PHP ? EasyUI DataGrid 资料存的方式介绍
2012/11/07 PHP
WordPress中访客登陆实现邮件提醒的PHP脚本实例分享
2015/12/14 PHP
php中让人头疼的浮点数运算分析
2016/10/10 PHP
php+mongodb判断坐标是否在指定多边形区域内的实例
2016/10/28 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
原生js 秒表实现代码
2012/07/24 Javascript
jquery1.9 下检测浏览器类型和版本的方法
2013/12/26 Javascript
javascript中CheckBox全选终极方案
2015/05/20 Javascript
使用Chrome浏览器调试AngularJS应用的方法
2015/06/18 Javascript
完美实现js选项卡切换效果(一)
2017/03/08 Javascript
angular-ngSanitize模块-$sanitize服务详解
2017/06/13 Javascript
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
2019/06/24 Javascript
小程序input数据双向绑定实现方法
2019/10/17 Javascript
详解JavaScript的this指向和绑定
2020/09/08 Javascript
Python读取excel指定列生成指定sql脚本的方法
2018/11/28 Python
Python设计模式之策略模式实例详解
2019/01/21 Python
python的pstuil模块使用方法总结
2019/07/26 Python
python之pymysql模块简单应用示例代码
2019/12/16 Python
Python paramiko 模块浅谈与SSH主要功能模拟解析
2020/02/29 Python
CSS3,线性渐变(linear-gradient)的使用总结
2017/01/09 HTML / CSS
美国隐形眼镜网:Major Lens
2018/02/09 全球购物
大型营销活动计划书
2014/04/28 职场文书
本科生导师推荐信范文
2014/05/18 职场文书
诉讼财产保全担保书
2014/05/20 职场文书
经济管理专业求职信
2014/06/09 职场文书
植树造林的宣传标语
2014/06/23 职场文书
学习党的群众路线对照检查材料
2014/09/29 职场文书
2015年世界水日活动总结
2015/02/09 职场文书
2015年事业单位办公室文员工作总结
2015/04/24 职场文书
Python基础详解之描述符
2021/04/28 Python
tensorflow中的梯度求解及梯度裁剪操作
2021/05/26 Python
Mysql忘记密码解决方法
2022/02/12 MySQL
CentOS 7安装mysql5.7使用XtraBackUp备份工具命令详解
2022/04/12 MySQL
解决flex布局中子项目尺寸不受flex-shrink限制
2022/05/11 HTML / CSS