封装了一个支持匿名函数的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 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
May 18 Javascript
js jquery验证银行卡号信息正则学习
Jan 21 Javascript
Script标签与访问HTML页面详解
Jan 10 Javascript
Array 重排序方法和操作方法的简单实例
Jan 24 Javascript
基于jQuery滑动杆实现购买日期选择效果
Sep 15 Javascript
深入解析Javascript闭包的功能及实现方法
Jul 10 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
Oct 10 Javascript
微信小程序wx.getImageInfo()如何获取图片信息
Jan 26 Javascript
解决VUE中document.body.scrollTop为0的问题
Sep 15 Javascript
ES6的解构赋值实例详解
May 06 Javascript
如何利用vue实现波谱拟合详解
Nov 05 Javascript
如何在VUE中使用vue-awesome-swiper
Jan 04 Vue.js
用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限制页面只能在微信自带浏览器访问的代码
2014/01/15 PHP
php读取flash文件高宽帧数背景颜色的方法
2015/01/06 PHP
PHP检测数据类型的几种方法(总结)
2017/03/04 PHP
Joomla框架实现字符串截取的方法示例
2017/07/18 PHP
Nigma vs Alliance BO5 第二场2.14
2021/03/10 DOTA
javascript 表单的友好用户体现
2009/01/07 Javascript
javaScript parseInt字符转化为数字函数使用小结
2009/11/05 Javascript
jquery属性过滤选择器使用示例
2013/06/18 Javascript
JavaScript插件化开发教程(五)
2015/02/01 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
2015/04/13 Javascript
AngularJS入门教程之静态模板详解
2016/08/18 Javascript
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
2017/09/21 Javascript
vue2.x+webpack快速搭建前端项目框架详解
2017/11/30 Javascript
浅谈webpack编译vue项目生成的代码探索
2017/12/11 Javascript
利用原生的JavaScript实现简单拼图游戏
2018/11/18 Javascript
引入外部js脚本加载慢与页面白屏问题的解决
2018/12/10 Javascript
浅谈DataFrame和SparkSql取值误区
2018/06/09 Python
Python中交换两个元素的实现方法
2018/06/29 Python
Pandas_cum累积计算和rolling滚动计算的用法详解
2019/07/04 Python
使用SVG实现提示框功能的示例代码
2020/06/05 HTML / CSS
html5实现九宫格抽奖可固定抽中某项奖品
2020/06/15 HTML / CSS
Java Servlet API中forward() 与redirect()的区别
2014/04/20 面试题
计算机专业个人求职自荐信
2013/09/21 职场文书
大学活动策划书范文
2014/01/10 职场文书
有多年工作经验的自我评价
2014/03/02 职场文书
2014年五四青年节演讲比赛方案
2014/04/22 职场文书
电子商务专业应届毕业生求职信
2014/06/21 职场文书
市政工程技术专业自荐书
2014/07/06 职场文书
电力培训心得体会
2014/09/02 职场文书
2014县政府领导班子三严三实对照检查材料思想汇报
2014/09/26 职场文书
实习工作表现评语
2014/12/31 职场文书
2015年幼儿园大班工作总结
2015/04/25 职场文书
2017年大学生寒假社会实践活动总结
2016/04/06 职场文书
李白经典诗之一:全文无一“月”字,却句句有月
2019/07/12 职场文书
详解Spring Security如何在权限中使用通配符
2022/06/28 Java/Android