封装了一个支持匿名函数的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脚本实现Web页面信息交互
Oct 11 Javascript
基于JQuery的一个简单的鼠标跟随提示效果
Sep 23 Javascript
JavaScript简单表格编辑功能实现方法
Apr 16 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
Jan 23 Javascript
BootStrap Progressbar 实现大文件上传的进度条的实例代码
Jun 27 Javascript
浅谈JavaScript 中有关时间对象的方法
Aug 15 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
Dec 14 Javascript
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
Aug 29 Javascript
Vue中点击active并第一个默认选中功能的实现
Feb 24 Javascript
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 jQuery
小程序实现录音功能
Sep 22 Javascript
js作用域及作用域链工作引擎
Jul 07 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下删除一篇文章生成的多个静态页面
2010/08/08 PHP
教你如何用php实现LOL数据远程获取
2014/06/10 PHP
PHP类的封装与继承详解
2015/09/29 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
Jquery为单选框checkbox绑定单击click事件
2012/12/18 Javascript
jQuery弹出层插件Lightbox_me使用指南
2015/04/21 Javascript
jQuery实现的瀑布流加载效果示例
2016/09/13 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
2016/10/09 Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
2017/02/19 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
2017/03/01 Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
2018/09/19 Javascript
脚手架vue-cli工程webpack的作用和特点
2018/09/29 Javascript
关于vue的npm run dev和npm run build的区别介绍
2019/01/14 Javascript
微信小程序返回箭头跳转到指定页面实例解析
2019/10/08 Javascript
vue-cli点击实现全屏功能
2020/03/07 Javascript
[03:07]DOTA2英雄基础教程 冰霜诅咒极寒幽魂
2013/12/06 DOTA
[47:03]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第二场 12.10
2020/12/13 DOTA
简单介绍Python中利用生成器实现的并发编程
2015/05/04 Python
Python PyQt5标准对话框用法示例
2017/08/23 Python
对Python 2.7 pandas 中的read_excel详解
2018/05/04 Python
Python 最大概率法进行汉语切分的方法
2018/12/14 Python
Python数据可视化之画图
2019/01/15 Python
python 求1-100之间的奇数或者偶数之和的实例
2019/06/11 Python
简单了解python filter、map、reduce的区别
2020/01/14 Python
OpenCV 表盘指针自动读数的示例代码
2020/04/10 Python
python中类与对象之间的关系详解
2020/12/16 Python
简单总结CSS3中视窗单位Viewport的常见用法
2016/02/04 HTML / CSS
安德玛加拿大官网:Under Armour加拿大
2019/10/02 全球购物
大专自我鉴定范文
2013/10/23 职场文书
运动会广播稿300字
2014/01/10 职场文书
法学专业毕业生自荐信
2014/06/11 职场文书
2014年客服工作总结范文
2014/11/13 职场文书
汽车转让协议书范本
2014/12/07 职场文书
党支部创先争优公开承诺书
2015/04/30 职场文书
Ruby使用Mysql2连接操作MySQL
2022/04/19 Ruby
Linux中文件的基本属性介绍
2022/06/01 Servers