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 26 Javascript
JavaScript通过join函数连接数组里所有元素的方法
Mar 20 Javascript
JavaScript实现cookie的写入、读取、删除功能
Nov 05 Javascript
js点击返回跳转到指定页面实现过程
Aug 20 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
Jul 24 Javascript
AngularJs directive详解及示例代码
Sep 01 Javascript
微信小程序 POST请求(网络请求)详解及实例代码
Nov 16 Javascript
JS插件plupload.js实现多图上传并显示进度条
Nov 29 Javascript
深入理解Puppeteer的入门教程和实践
Mar 05 Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
Apr 24 Javascript
vue中的循环对象属性和属性值用法
Sep 04 Javascript
在vue中实现某一些路由页面隐藏导航栏的功能操作
Sep 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
咖啡知识 咖啡养豆要养多久 排气又是什么
2021/03/06 新手入门
mysql5写入和读出乱码解决
2006/11/25 PHP
thinkPHP中验证码的简单实现方法
2016/12/05 PHP
php实现遍历文件夹的方法汇总
2017/03/02 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
如何让您的中波更粗更长 - 中波框形天线制作
2021/03/10 无线电
javascript学习网址备忘
2007/05/29 Javascript
js常用系统函数用法实例分析
2015/01/12 Javascript
NodeJS学习笔记之Http模块
2015/01/13 NodeJs
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
2015/03/25 Javascript
JavaScript实现鼠标点击后层展开效果的方法
2015/05/13 Javascript
创建你的第一个AngularJS应用的方法
2015/06/16 Javascript
引用jquery框架后出错的解决方法
2016/08/09 Javascript
概述一个页面从输入URL到页面加载完的过程
2016/12/16 Javascript
详解使用Typescript开发node.js项目(简单的环境配置)
2017/10/09 Javascript
webpack打包react项目的实现方法
2018/06/21 Javascript
纯js+css实现仿移动端淘宝网站的弹出详情框功能
2019/12/29 Javascript
Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求
2020/09/01 Javascript
[00:30]明星选手化身超级英雄!2018DOTA2亚洲邀请赛全明星赛来临!
2018/04/06 DOTA
Python实现的一个自动售饮料程序代码分享
2014/08/25 Python
Python fileinput模块使用介绍
2014/11/30 Python
利用Python3分析sitemap.xml并抓取导出全站链接详解
2017/07/04 Python
Tensorflow分类器项目自定义数据读入的实现
2019/02/05 Python
基于python实现语音录入识别代码实例
2020/01/17 Python
python 实现rolling和apply函数的向下取值操作
2020/06/08 Python
用python实现学生管理系统
2020/07/24 Python
CSS3改变浏览器滚动条样式
2019/01/04 HTML / CSS
Html5适配iphoneX刘海屏的简单实现
2019/04/09 HTML / CSS
澳大利亚电商Catch新西兰站:Catch.co.nz
2020/05/30 全球购物
英语自荐信常用语句
2013/12/13 职场文书
入党积极分子思想汇报范文
2014/01/05 职场文书
教师年度考核自我鉴定
2014/01/19 职场文书
出国留学导师推荐信
2015/03/26 职场文书
2019朋友新婚祝福语精选
2019/10/10 职场文书
Nebula Graph解决风控业务实践
2022/03/31 MySQL
详解CSS中postion和opacity及cursor的特性
2022/08/14 HTML / CSS