封装了一个支持匿名函数的Javascript事件监听器


Posted in Javascript onJune 05, 2014

关于js中的事件监听大家用的比较多了,无非是判断浏览器是否支持addEventListener和attachEvent,网上搜索关于事件监听的方法也挺多,但是总有些不是很完善。下面的方法中对于添加事件监听的方法是一样的,只不过在取消事件绑定上面做了点手术,现在可以支持匿名函数的使用,所以在绑定事件的时候不再需要给函数单独命名了。

主要代码:

/*绑定事件与取消绑定*/
var handleHash = {};
var bind = (function() {
 if (window.addEventListener) {
  return function(el, type, fn, capture) {
   el.addEventListener(type, function(){
    fn();
    handleHash[type] = handleHash[type] || [];
    handleHash[type].push(arguments.callee);
   }, capture);
  };
 } else if (window.attachEvent) {
  return function(el, type, fn, capture) {
   el.attachEvent("on" + type, function(){
    fn();
    handleHash[type] = handleHash[type] || [];
    handleHash[type].push(arguments.callee);
   });
  };
 }
})();
var unbind = (function(){
 if (window.addEventListener) {
  return function(el, type ) {
   if(handleHash[type]){
    var i = 0, len = handleHash[type].length;
    for (i; i<len ; i += 1){
     el.removeEventListener(type, handleHash[type][i]);
    }
   };
  };
 } else if (window.attachEvent) {
  return function(el, type) {
   if(handleHash[type]){
    var i = 0, len = handleHash[type].length;
    for (i; i<len ; i += 1){
     el.detachEvent("on" + type, handleHash[type][i]);
    }
   };
  };
 }
})();

原理解析:

handleHash做哈希表缓存事件的function,handleHash['事件名称']是一个数组,来添加多个事件监听的方法,unbind哪个事件的时候遍历handleHash['事件名称']的数组,然后移除。

使用:

bind(obj,'click',function(){
 alert ('click');
});
unbind(obj,'click');
Javascript 相关文章推荐
浅谈Javascript变量作用域问题
Dec 16 Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
Aug 07 Javascript
JS+CSS实现简易实用的滑动门菜单效果
Sep 18 Javascript
基于JavaScript实现一定时间后去执行一个函数
Dec 14 Javascript
jQuery自制提示框tooltip改进版
Aug 01 Javascript
简单几步实现返回顶部效果
Dec 05 Javascript
javascript简单写的判断电话号码实例
May 24 Javascript
js 提取某()特殊字符串长度的实例
Dec 06 Javascript
angular2中使用第三方js库的实例
Feb 26 Javascript
JavaScript中Array方法你该知道的正确打开方法
Sep 11 Javascript
小程序获取周围IBeacon设备的方法
Oct 31 Javascript
js实现上传图片到服务器
Apr 11 Javascript
用js读、写、删除Cookie代码分享及详细注释说明
Jun 05 #Javascript
NODE.JS加密模块CRYPTO常用方法介绍
Jun 05 #Javascript
jquery左边浮动到一定位置时显示返回顶部按钮
Jun 05 #Javascript
在Node.js中实现文件复制的方法和实例
Jun 05 #Javascript
javascript移动设备Web开发中对touch事件的封装实例
Jun 05 #Javascript
删除条目时弹出的确认对话框
Jun 05 #Javascript
判断复选框是否被选中的两种方法
Jun 04 #Javascript
You might like
《PHP边学边教》(02.Apache+PHP环境配置――上篇)
2006/12/13 PHP
PHP中error_reporting()函数的用法(修改PHP屏蔽错误)
2011/07/01 PHP
利用yahoo汇率接口实现实时汇率转换示例 汇率转换器
2014/01/14 PHP
php技术实现加载字体并保存成图片
2015/07/27 PHP
学习php设计模式 php实现装饰器模式(decorator)
2015/12/07 PHP
PHP url的pathinfo模式加载不同控制器的简单实现
2016/08/12 PHP
php 删除一维数组中某一个值元素的操作方法
2018/02/01 PHP
运用Windows XP附带的Msicuu.exe、Msizap.exe来彻底卸载顽固程序
2007/04/21 Javascript
Packer 3.0 JS压缩及混淆工具 下载
2007/05/03 Javascript
原生Ajax 和jQuery Ajax的区别示例分析
2014/12/17 Javascript
nodejs导出excel的方法
2015/06/30 NodeJs
AngularJS 验证码60秒倒计时功能的实现
2017/06/05 Javascript
nodejs mysql 实现分页的方法
2017/06/06 NodeJs
Node.JS更改Windows注册表Regedit的方法小结
2017/08/18 Javascript
AngularJS 事件发布机制
2018/08/28 Javascript
vant(ZanUi)结合async-validator实现表单验证的方法
2018/12/06 Javascript
javascript读取本地文件和目录方法详解
2020/08/06 Javascript
如何通过JS实现日历简单算法
2020/10/14 Javascript
[01:59]深扒TI7聊天轮盘语音出处 1
2017/05/11 DOTA
[49:35]2018DOTA2亚洲邀请赛3月30日 小组赛A组 KG VS TNC
2018/03/31 DOTA
python中使用xlrd、xlwt操作excel表格详解
2015/01/29 Python
python采用django框架实现支付宝即时到帐接口
2016/05/17 Python
解决Ubuntu pip 安装 mysql-python包出错的问题
2018/06/11 Python
Python实现的绘制三维双螺旋线图形功能示例
2018/06/23 Python
Python实现的企业粉丝抽奖功能示例
2019/07/26 Python
利用python计算windows全盘文件md5值的脚本
2019/07/27 Python
python开发实例之Python的Twisted框架中Deferred对象的详细用法与实例
2020/03/19 Python
更新升级python和pip版本后不生效的问题解决
2020/04/17 Python
pytorch 计算ConvTranspose1d输出特征大小方式
2020/06/23 Python
浅谈CSS3动画的回调处理
2016/07/21 HTML / CSS
将SVG图引入到HTML页面的实现
2019/09/20 HTML / CSS
世界上最受欢迎的钓鱼诱饵:Rapala
2019/05/02 全球购物
大四学年自我鉴定
2013/11/13 职场文书
学习保证书100字
2015/02/26 职场文书
JS数组方法some、every和find的使用详情
2021/10/05 Javascript
基于Pygame实现简单的贪吃蛇游戏
2021/12/06 Python