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 相关文章推荐
经典的解除许多网站无法复制文字的绝招
Dec 31 Javascript
IE与firefox下Dhtml的一些区别小结
Dec 02 Javascript
javascript中callee与caller的用法和应用场景
Dec 08 Javascript
jquery的map与get方法详解
Nov 04 Javascript
node.js超时timeout详解
Nov 26 Javascript
JQuery记住用户名密码实现下次自动登录功能
Apr 27 Javascript
webpack独立打包和缓存处理详解
Apr 03 Javascript
vue实现分页栏效果
Jun 28 Javascript
javascript实现超好看的3D烟花特效
Jan 01 Javascript
vscode调试node.js的实现方法
Mar 22 Javascript
Vue proxyTable配置多个接口地址,解决跨域的问题
Sep 11 Javascript
Vue开发中常见的套路和技巧总结
Nov 24 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中截取中文字符串的代码小结
2011/07/17 PHP
php中chdir()函数用法实例
2014/11/13 PHP
laravel实现简单用户权限的示例代码
2019/05/28 PHP
脚本吧 - 幻宇工作室用到js,超强推荐base.js
2006/12/23 Javascript
一个支付页面DEMO附截图
2014/07/22 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
2016/01/18 Javascript
javascript特殊日历控件分享
2016/03/07 Javascript
把普通对象转换成json格式的对象的简单实例
2016/07/04 Javascript
浅谈JavaScript 覆盖原型以及更改原型
2016/08/31 Javascript
基于JavaScript实现右键菜单和拖拽功能
2016/11/28 Javascript
深入理解Angularjs中$http.post与$.post
2017/05/19 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
2018/01/12 Javascript
vue中使用element-ui进行表单验证的实例代码
2018/06/22 Javascript
electron中使用bootstrap的示例代码
2018/11/06 Javascript
35个最好用的Vue开源库(史上最全)
2019/01/03 Javascript
vue 实现Web端的定位功能 获取经纬度
2019/08/08 Javascript
javascript实现fetch请求返回的统一拦截
2019/12/22 Javascript
JavaScript中的this基本问题实例小结
2020/03/09 Javascript
栈和队列数据结构的基本概念及其相关的Python实现
2015/08/24 Python
回调函数的意义以及python实现实例
2017/06/20 Python
python+matplotlib绘制3D条形图实例代码
2018/01/17 Python
PyCharm在新窗口打开项目的方法
2019/01/17 Python
基于Python的ModbusTCP客户端实现详解
2019/07/13 Python
python解析yaml文件过程详解
2019/08/30 Python
浅谈Tensorflow 动态双向RNN的输出问题
2020/01/20 Python
详解Python直接赋值,深拷贝和浅拷贝
2020/07/09 Python
python 爬取B站原视频的实例代码
2020/09/09 Python
美国著名的家居用品购物网站:Bed Bath & Beyond
2018/01/05 全球购物
戴森比利时官方网站:Dyson BE
2020/10/03 全球购物
客房主管岗位职责
2013/12/09 职场文书
白血病募捐倡议书
2014/05/14 职场文书
建党伟业电影观后感
2015/06/01 职场文书
升职自荐书
2019/05/09 职场文书
2019年暑期安全广播稿!
2019/07/03 职场文书
XX部保密工作制度范本
2019/08/27 职场文书
Golang中interface{}转为数组的操作
2021/04/30 Golang