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和jquery批量绑定事件传参数一(新猪猪原创)
Jun 23 Javascript
textarea焦点的用法实现获取焦点清空失去焦点提示效果
May 19 Javascript
JavaScript function 的 length 属性使用介绍
Sep 15 Javascript
jQuery实现视频作为全屏幕背景
Dec 18 Javascript
JS实现自动切换文字的导航效果代码
Aug 27 Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
Jul 07 Javascript
分享Bootstrap简单表格、表单、登录页面
Aug 04 Javascript
Bootstrap一款超好用的前端框架
Sep 25 Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
Feb 08 Javascript
vue 搭建后台系统模块化开发详解
May 01 Javascript
node创建Vue项目步骤详解
Mar 06 Javascript
Vue proxyTable配置多个接口地址,解决跨域的问题
Sep 11 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 常用字符串函数总结
2008/03/15 PHP
PHP XML操作类DOMDocument
2009/12/16 PHP
PHP关于IE下的iframe跨域导致session丢失问题解决方法
2013/10/10 PHP
php中引用符号(&amp;)的使用详解
2013/11/13 PHP
分享PHP函数实现数字与文字分页代码
2015/07/28 PHP
java解析json方法总结
2019/05/16 PHP
js 时间格式与时间戳的相互转换示例代码
2013/12/25 Javascript
jquery对table中各数据的增加、保存、删除操作示例
2014/05/14 Javascript
javascript中的__defineGetter__和__defineSetter__介绍
2014/08/15 Javascript
JavaScript获取一个范围内日期的方法
2015/04/24 Javascript
jQuery解析json格式数据简单实例
2016/01/22 Javascript
Jquery元素追加和删除的实现方法
2016/05/24 Javascript
微信小程序开发之入门实例教程篇
2017/03/07 Javascript
JavaScript代码判断输入的字符串是否含有特殊字符和表情代码实例
2017/08/17 Javascript
vue中Npm run build 根据环境传递参数方法来打包不同域名
2018/03/29 Javascript
解决vue 中 echart 在子组件中只显示一次的问题
2018/08/07 Javascript
React注册倒计时功能的实现
2018/09/06 Javascript
js逆向解密之网络爬虫
2019/05/30 Javascript
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
2020/04/24 Javascript
Node.js path模块,获取文件后缀名操作
2020/11/07 Javascript
Python类定义和类继承详解
2015/05/08 Python
python装饰器实例大详解
2017/10/25 Python
浅析Git版本控制器使用
2017/12/10 Python
Python最小二乘法矩阵
2019/01/02 Python
总结python中pass的作用
2019/02/27 Python
Python爬取某平台短视频的方法
2021/02/08 Python
python抢购软件/插件/脚本附完整源码
2021/03/04 Python
Arti-shopping中文官网:大型海外商品一站式直邮平台
2020/03/23 全球购物
科颜氏香港官方网店:Kiehl’s香港
2021/03/07 全球购物
敬老文明号事迹材料
2014/01/16 职场文书
弘扬民族精神演讲稿
2014/05/07 职场文书
安全标兵事迹材料
2014/08/17 职场文书
售后服务承诺函格式
2015/01/21 职场文书
2016年元旦主持词
2015/07/06 职场文书
承诺书的签字人,需不需要承担相应的责任?
2019/07/09 职场文书
浅谈Golang 切片(slice)扩容机制的原理
2021/06/09 Golang