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 相关文章推荐
用正则获取指定路径文件的名称
Feb 27 Javascript
解决JS中乘法的浮点错误的方法
Jan 03 Javascript
js实现n秒倒计时后才可以点击的效果
Dec 20 Javascript
原生javascript实现自动更新的时间日期
Feb 12 Javascript
Webpack 实现 AngularJS 的延迟加载
Mar 02 Javascript
JS组件Bootstrap实现弹出框效果代码
Apr 26 Javascript
JavaScript编写Chrome扩展实现与浏览器的交互及时间通知
May 16 Javascript
Vue.js开发环境搭建
Nov 10 Javascript
Javascript设计模式之装饰者模式详解篇
Jan 17 Javascript
bootstrap multiselect下拉列表功能
Aug 22 Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
Apr 02 Javascript
JS class语法糖的深入剖析
Jul 07 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后台如何避免用户直接进入方法实例
2013/10/15 PHP
php接口和抽象类使用示例详解
2014/03/02 PHP
php ci框架中加载css和js文件失败的解决方法
2014/03/03 PHP
根据ip调用新浪api获取城市名并转成拼音
2014/03/07 PHP
PHP base64编码后解码乱码的解决办法
2014/06/19 PHP
Chrome Web App开发小结
2014/09/04 PHP
ThinkPHP框架结合Ajax实现用户名校验功能示例
2019/07/03 PHP
PHP var关键字相关原理及使用实例解析
2020/07/11 PHP
date.parse在IE和FF中的区别
2010/07/29 Javascript
jQuery ul标签下拉菜单演示代码
2010/12/11 Javascript
jquery实现商品拖动选择效果代码(自写)
2013/05/28 Javascript
Javascript的表单验证-揭开正则表达式的面纱
2016/03/18 Javascript
js验证真实姓名与身份证号,手机号的简单实例
2016/07/18 Javascript
JS实现简单拖拽效果
2017/06/21 Javascript
js判断传入时间和当前时间大小实例(超简单)
2018/01/11 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
2018/05/22 Javascript
使用rollup打包JS的方法步骤
2018/12/05 Javascript
图文讲解用vue-cli脚手架创建vue项目步骤
2019/02/12 Javascript
11个教程中不常被提及的JavaScript小技巧(推荐)
2019/04/17 Javascript
django.db.utils.ProgrammingError: (1146, u“Table‘’ doesn’t exist”)问题的解决
2018/07/13 Python
python并发和异步编程实例
2018/11/15 Python
Pythony运维入门之Socket网络编程详解
2019/04/15 Python
Python统计一个字符串中每个字符出现了多少次的方法【字符串转换为列表再统计】
2019/05/05 Python
PyInstaller将Python文件打包为exe后如何反编译(破解源码)以及防止反编译
2020/04/15 Python
Django实现微信小程序支付的示例代码
2020/09/03 Python
Python在后台自动解压各种压缩文件的实现方法
2020/11/10 Python
用HTML5.0制作网页的教程
2010/05/30 HTML / CSS
五分钟学会HTML5的WebSocket协议
2019/11/22 HTML / CSS
香港化妆品经销商:我的公主
2016/08/05 全球购物
linux面试题参考答案(7)
2012/10/29 面试题
校园报刊亭的创业计划书
2014/01/02 职场文书
厂办主管岗位职责范本
2014/02/28 职场文书
2014最新开业庆典策划方案(5篇)
2014/09/15 职场文书
个人查摆剖析材料
2014/10/04 职场文书
大学生翘课检讨书范文
2014/10/06 职场文书
MySQL分区以及建索引的方法总结
2022/04/13 MySQL