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对象是否存在
Sep 22 Javascript
js调用打印机打印网页字体总是缩小一号的解决方法
Jan 24 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
Aug 20 Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
Jan 28 Javascript
js使用setTimeout实现定时炸弹的方法
Apr 10 Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
Oct 02 Javascript
Bootstrap实现响应式导航栏效果
Dec 28 Javascript
通过jquery-ui中的sortable来实现拖拽排序的简单实例
May 24 Javascript
js实现省市级联效果分享
Aug 10 Javascript
说说如何在Vue.js中实现数字输入组件的方法
Jan 08 Javascript
微信小程序用户授权,以及判断登录是否过期的方法
May 10 Javascript
详解小程序用户登录状态检查与更新实例
May 15 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
PHP 删除文件与文件夹操作 unlink()与rmdir()这两个函数的使用
2011/07/17 PHP
PHP中数组合并的两种方法及区别介绍
2012/09/14 PHP
php正则修正符用法实例详解
2016/12/29 PHP
PHP调用接口用post方法传送json数据的实例
2018/05/31 PHP
PHP copy函数使用案例代码解析
2020/09/01 PHP
浅谈js中变量初始化
2015/02/03 Javascript
Vue.js系列之项目搭建(1)
2017/01/03 Javascript
JavaScript中的遍历详解(多种遍历)
2017/04/07 Javascript
Vue入门之animate过渡动画效果
2018/04/08 Javascript
webstorm添加*.vue文件支持
2018/05/08 Javascript
JavaScript简单实现关键字文本搜索高亮显示功能示例
2018/07/25 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
2018/12/24 Javascript
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
2020/04/04 jQuery
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
2020/10/09 Javascript
[55:54]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python2中的raw_input() 与 input()
2015/06/12 Python
让python 3支持mysqldb的解决方法
2017/02/14 Python
Python新手们容易犯的几个错误总结
2017/04/01 Python
Python中循环后使用list.append()数据被覆盖问题的解决
2018/07/01 Python
pandas实现将dataframe满足某一条件的值选出
2019/06/12 Python
python使用tkinter库实现五子棋游戏
2019/06/18 Python
python禁用键鼠与提权代码实例
2019/08/16 Python
Django使用Profile扩展User模块方式
2020/05/14 Python
Python分析微信好友性别比例和省份城市分布比例的方法示例【基于itchat模块】
2020/05/29 Python
Python爬虫headers处理及网络超时问题解决方案
2020/06/19 Python
乌克兰机票、铁路和巴士票、酒店搜索、保险:Tickets.ua
2020/01/11 全球购物
捷克多品牌在线时尚商店:ANSWEAR.cz
2020/10/03 全球购物
怎样声明接口
2014/09/19 面试题
汽车专业毕业生推荐信
2013/11/12 职场文书
行政文秘岗位职责范本
2014/02/10 职场文书
优质服务演讲稿
2014/05/14 职场文书
车辆工程专业求职信
2014/06/14 职场文书
2015年119消防宣传日活动总结
2015/03/24 职场文书
2015年小学教导处工作总结
2015/05/26 职场文书
2016年社区国庆节活动总结
2016/04/01 职场文书
Mysql 8.x 创建用户以及授予权限的操作记录
2022/04/18 MySQL