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跨域获得Json时invalid label错误的解决办法
Jan 11 Javascript
JavaScript中创建类/对象的几种方法总结
Nov 29 Javascript
jQuery中的$.ajax()方法应用
May 06 Javascript
JavaScript实现获取dom中class的方法
Feb 09 Javascript
JQuery工具函数汇总
Jun 15 Javascript
javascript实现手机震动API代码
Aug 05 Javascript
浅谈$('div a') 与$('div&gt;a')的区别
Jul 18 Javascript
js获取Get值的方法
Sep 29 Javascript
Angular.js自定义指令学习笔记实例
Feb 24 Javascript
js实现返回顶部效果
Mar 10 Javascript
node.js到底要不要加分号浅析
Jul 11 Javascript
Vue组件通信中非父子组件传值知识点总结
Dec 05 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/03/01 无线电
PHP的栏目导航程序
2006/10/09 PHP
laravel ORM 只开启created_at的几种方法总结
2018/01/29 PHP
php微信开发之关注事件
2018/06/14 PHP
线路分流自动跳转代码;希望对大家有用!
2006/12/02 Javascript
爱恋千雪-US-AscII加密解密工具(网页加密)下载
2007/06/06 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
2014/10/17 Javascript
JavaScript数组常用操作技巧汇总
2014/11/17 Javascript
node.js中的fs.close方法使用说明
2014/12/17 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
2015/11/17 Javascript
Jquery中request和request.form和request.querystring的区别
2015/11/26 Javascript
javascript图片延迟加载实现方法及思路
2015/12/31 Javascript
Javascript中判断一个值是否为undefined的方法详解
2016/09/28 Javascript
JavaScript中数组Array.sort()排序方法详解
2017/03/01 Javascript
微信小程序 弹窗自定义实例代码
2017/03/08 Javascript
详解Vue SPA项目优化小记
2018/07/03 Javascript
Vue 实现展开折叠效果的示例代码
2018/08/27 Javascript
详解基于Vue的支持数据双向绑定的select组件
2019/09/02 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
2020/04/15 Javascript
在Python中marshal对象序列化的相关知识
2015/07/01 Python
教你用Python创建微信聊天机器人
2020/03/31 Python
基于python 二维数组及画图的实例详解
2018/04/03 Python
用Python写一个模拟qq聊天小程序的代码实例
2019/03/06 Python
Python 解决OPEN读文件报错 ,路径以及r的问题
2019/12/19 Python
Tensorflow读取并输出已保存模型的权重数值方式
2020/01/04 Python
分享unittest单元测试框架中几种常用的用例加载方法
2020/12/02 Python
CSS3 透明色 RGBA使用介绍
2013/08/06 HTML / CSS
博士生入学考试推荐信
2013/11/17 职场文书
函授自我鉴定范文
2014/02/06 职场文书
《郑和远航》教学反思
2014/04/16 职场文书
学生会宣传部部长竞选演讲稿
2014/04/25 职场文书
房屋出租协议书范本(标准版)
2014/09/24 职场文书
2014年团支书工作总结
2014/11/14 职场文书
2015年社区关工委工作总结
2015/04/03 职场文书
TensorFlow中tf.batch_matmul()的用法
2021/06/02 Python
Python机器学习之决策树和随机森林
2021/07/15 Javascript