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实现二分查找法实现代码
Nov 12 Javascript
JavaScript 乱码问题
Aug 06 Javascript
JavaScript类库D
Oct 24 Javascript
iframe中使用jquery进行查找的方法【案例分析】
Jun 17 Javascript
AngularJS自定义控件实例详解
Dec 13 Javascript
javascript 正则表达式分组、断言详解
Apr 20 Javascript
微信小程序实现弹出层效果
May 26 Javascript
vue 基于element-ui 分页组件封装的实例代码
Dec 10 Javascript
angular6 填坑之sdk的方法
Dec 27 Javascript
JS基于开关思想实现的数组去重功能【案例】
Feb 18 Javascript
深入浅析Vue 中 ref 的使用
Apr 29 Javascript
vue+flask实现视频合成功能(拖拽上传)
Mar 04 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中{}大括号是什么意思
2013/12/01 PHP
PHP动态生成javascript文件的2个例子
2014/04/11 PHP
一个简洁实用的PHP缓存类完整实例
2014/07/26 PHP
php实现的通用图片处理类
2015/03/24 PHP
php设计模式之装饰模式应用案例详解
2019/06/17 PHP
php 自定义函数实现将数据 以excel 表格形式导出示例
2019/11/13 PHP
javascript 函数调用的对象和方法
2010/07/01 Javascript
jQuery实现密保互斥问题解决方案
2013/08/16 Javascript
使用jQuery解决IE与FireFox下createElement方法的差异
2013/11/14 Javascript
Javascript数组Array基础介绍
2016/03/13 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
2016/05/15 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
2016/10/10 Javascript
canvas 实现中国象棋
2017/02/17 Javascript
JavaScript ES6中的简写语法总结与使用技巧
2018/12/30 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
2019/05/06 Javascript
微信小程序开发常见问题及解决方案
2019/07/11 Javascript
vue路由教程之静态路由
2019/09/03 Javascript
Vue.js watch监视属性知识点总结
2019/11/11 Javascript
JavaScript实现alert弹框效果
2020/11/19 Javascript
python两种遍历字典(dict)的方法比较
2014/05/29 Python
Python编程中对文件和存储器的读写示例
2016/01/25 Python
以一个投票程序的实例来讲解Python的Django框架使用
2016/02/18 Python
Python编程中NotImplementedError的使用方法
2018/04/21 Python
python爬虫之urllib3的使用示例
2018/07/09 Python
python将txt文件读取为字典的示例
2018/12/22 Python
python 读取更新中的log 或其它文本方式
2019/12/24 Python
Python 生成VOC格式的标签实例
2020/03/10 Python
美国尼曼百货官网:Neiman Marcus
2019/09/05 全球购物
大学生创业感言
2014/01/25 职场文书
《只有一个地球》教学反思
2014/02/14 职场文书
一年级小学生评语
2014/04/22 职场文书
法院反腐倡廉心得体会
2014/09/09 职场文书
2014法院四风问题对照检查材料思想汇报
2014/10/04 职场文书
大学生村官个人总结
2015/02/15 职场文书
JS 4个超级实用的小技巧 提升开发效率
2021/10/05 Javascript
使用Python开发贪吃蛇游戏 SnakeGame
2022/04/30 Python