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 checkbox(复选框) 使用集锦
Apr 28 Javascript
Jquery乱码的一次解决过程 图解教程
Feb 20 Javascript
单独使用CKFinder选择图片的方法
Aug 21 Javascript
单击浏览器右上角的X关闭窗口弹出提示的小例子
Jun 12 Javascript
JavaScript数字和字符串转换示例
Mar 26 Javascript
jQuery源码分析之jQuery中的循环技巧详解
Sep 06 Javascript
Backbone.js的Hello World程序实例
Jun 19 Javascript
JavaScript中var关键字的使用详解
Aug 14 Javascript
jQuery实现自动输入email、时间和域名的方法
Aug 24 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
Nov 21 Javascript
Bootstrap模态窗口源码解析
Feb 08 Javascript
详解webpack的配置文件entry与output
Aug 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
mysql limit查询优化分析
2008/11/12 PHP
php生成图形(Libchart)实例
2013/11/06 PHP
PHP 与 js的通信(via ajax,json)
2010/11/16 Javascript
DOM 中的事件处理介绍
2012/01/18 Javascript
js中的replace方法使用介绍
2013/10/28 Javascript
浅谈javascript六种数据类型以及特殊注意点
2013/12/20 Javascript
JQuery勾选指定name的复选框集合并显示的方法
2015/05/18 Javascript
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
2016/01/07 Javascript
js只执行1次的函数示例
2016/07/20 Javascript
js获取上传文件的绝对路径实现方法
2016/08/02 Javascript
浅谈关于angularJs中使用$.ajax的注意点
2017/08/12 Javascript
原生JS上传大文件显示进度条 php上传文件代码
2020/03/27 Javascript
JS去掉字符串末尾的标点符号及删除最后一个字符的方法
2017/10/24 Javascript
JavaScript中关于base64的一些事
2019/05/06 Javascript
vue+elementUI动态生成面包屑导航教程
2019/11/04 Javascript
JS插入排序简单理解与实现方法分析
2019/11/25 Javascript
解决vue无法侦听数组及对象属性的变化问题
2020/07/17 Javascript
vue如何使用rem适配
2021/02/06 Vue.js
基于vue的video播放器的实现示例
2021/02/19 Vue.js
python实现的登陆Discuz!论坛通用代码分享
2014/07/11 Python
Python中处理字符串之endswith()方法的使用简介
2015/05/18 Python
Python运算符重载用法实例
2015/05/28 Python
python 简单搭建阻塞式单进程,多进程,多线程服务的实例
2017/11/01 Python
python使用PyCharm进行远程开发和调试
2017/11/02 Python
对python append 与浅拷贝的实例讲解
2018/05/04 Python
Python实现的redis分布式锁功能示例
2018/05/29 Python
Python 实现加密过的PDF文件转WORD格式
2020/02/04 Python
Keras 切换后端方式(Theano和TensorFlow)
2020/06/19 Python
HTML5 解析规则分析
2009/08/14 HTML / CSS
New Balance英国官方网站:始于1906年,百年慢跑品牌
2016/12/07 全球购物
伦敦剧院门票:From The Box Office
2018/06/30 全球购物
销售员试用期自我评价
2014/09/15 职场文书
酒会邀请函
2015/01/31 职场文书
2015秋季小学开学寄语
2015/05/27 职场文书
幼儿园庆六一主持词
2015/06/30 职场文书
python使用PySimpleGUI设置进度条及控件使用
2021/06/10 Python