封装了一个支持匿名函数的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 Cookie显示用户上次访问的时间和次数
Dec 08 Javascript
javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)
Dec 28 Javascript
jQuery事件绑定与解除绑定实现方法
Apr 15 Javascript
jQuery实现限制textarea文本框输入字符数量的方法
May 28 Javascript
Javascript 是你的高阶函数(高级应用)
Jun 15 Javascript
JS实现3D图片旋转展示效果代码
Sep 22 Javascript
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
Jan 19 Javascript
AngularJS使用ng-inlude指令加载页面失败的原因与解决方法
Jan 19 Javascript
js canvas实现简单的图像扩散效果
Jun 28 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
PWA介绍及快速上手搭建一个PWA应用的方法
Jan 27 Javascript
vue-cli webpack配置文件分析
May 20 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
破解.net程序(dll文件)编译和反编译方法
2013/01/31 PHP
使用PHP uniqid函数生成唯一ID
2015/11/18 PHP
微信支付PHP SDK之微信公众号支付代码详解
2015/12/09 PHP
PHP二进制与字符串之间的相互转换教程
2016/10/14 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
来自qq的javascript面试题
2010/07/24 Javascript
javascript学习笔记(六) Date 日期类型
2012/06/19 Javascript
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
2012/11/11 Javascript
Extjs 3.3切换tab隐藏相应工具栏出现空白解决
2013/04/02 Javascript
编写js扩展方法判断一个数组中是否包含某个元素
2013/11/08 Javascript
Jquery Ajax方法传值到action的方法
2014/05/11 Javascript
JS实现点击复选框变更DIV显示状态的示例代码
2017/12/18 Javascript
Angularjs实现页面模板清除的方法
2018/07/20 Javascript
微信小程序获取音频时长与实时获取播放进度问题
2018/08/28 Javascript
Vue.extend 编程式插入组件的实现
2019/11/18 Javascript
Nodejs环境实现socket通信过程解析
2020/07/03 NodeJs
跟老齐学Python之print详解
2014/09/28 Python
Python中用于转换字母为小写的lower()方法使用简介
2015/05/19 Python
Python单体模式的几种常见实现方法详解
2017/07/28 Python
Python实用技巧之列表、字典、集合中根据条件筛选数据详解
2018/07/11 Python
解决python selenium3启动不了firefox的问题
2018/10/13 Python
python利用wx实现界面按钮和按钮监听和字体改变的方法
2019/07/17 Python
python爬虫项目设置一个中断重连的程序的实现
2019/07/26 Python
python获取栅格点和面值的实现
2020/03/10 Python
Keras 在fit_generator训练方式中加入图像random_crop操作
2020/07/03 Python
HTML5 Canvas的性能提高技巧经验分享
2013/07/02 HTML / CSS
John Hardy官方网站:手工设计首饰的奢侈品牌
2017/07/05 全球购物
澳大利亚手袋、珠宝和在线时尚精品店:The Way
2019/12/21 全球购物
网上书店创业计划书
2014/01/12 职场文书
小学生竞选班干部演讲稿
2014/04/24 职场文书
财务管理专业毕业生求职信
2014/06/02 职场文书
关于保护环境的标语
2014/06/09 职场文书
信息管理与信息系统专业求职信
2014/06/21 职场文书
爱国主义教育演讲稿
2014/08/26 职场文书
签约仪式致辞
2015/07/30 职场文书
vue+element ui实现锚点定位
2021/06/29 Vue.js