封装了一个支持匿名函数的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 相关文章推荐
jQuery对象和DOM对象的相互转化实现代码
Mar 02 Javascript
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
May 16 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
Nov 19 Javascript
js实现的折叠导航示例
Nov 29 Javascript
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
Mar 25 Javascript
HTML5使用DeviceOrientation实现摇一摇功能
Jun 05 Javascript
又一款MVVM组件 构建自己的Vue组件(2)
Mar 13 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
Jul 27 Javascript
React-Native做一个文本输入框组件的实现代码
Aug 10 Javascript
详解Vue.directive 自定义指令
Mar 27 Javascript
JS扁平化输出数组的2种方法解析
Sep 17 Javascript
JS可断点续传文件上传实现代码解析
Jul 30 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对图像的各种处理函数代码小结
2013/07/08 PHP
PHP字符串长度计算 - strlen()函数使用介绍
2013/10/15 PHP
PHP多个文件上传到服务器实例
2014/10/29 PHP
将PHP从5.3.28升级到5.3.29时Nginx出现502错误
2015/05/09 PHP
php写入、删除与复制文件的方法
2015/06/20 PHP
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
PHP 文件上传限制问题
2019/09/01 PHP
PHP递归统计系统中代码行数
2019/09/19 PHP
js汉字转拼音实现代码
2013/02/06 Javascript
javascript中AJAX用法实例分析
2015/01/30 Javascript
Javascript设计模式理论与编程实战之简单工厂模式
2015/11/03 Javascript
Jquery中巧用Ajax的beforeSend方法
2016/01/20 Javascript
深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解
2016/04/03 Javascript
jQuery实现右键菜单、遮罩等效果代码
2016/09/27 Javascript
微信小程序 高德地图SDK详解及简单实例(源码下载)
2017/01/11 Javascript
微信小程序 标签传入数据
2017/05/08 Javascript
深入理解Commonjs规范及Node模块实现
2017/05/17 Javascript
在页面中引入js的两种方法(推荐)
2017/08/29 Javascript
JavaScript创建对象的常用方式总结
2018/08/10 Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
2018/09/12 Javascript
Node.js学习之内置模块fs用法示例
2020/01/22 Javascript
在vue项目中利用popstate处理页面返回的操作介绍
2020/08/06 Javascript
Python实现简单的代理服务器
2015/07/25 Python
对numpy中数组元素的统一赋值实例
2018/04/04 Python
python生成密码字典的方法
2018/07/06 Python
springboot配置文件抽离 git管理统 配置中心详解
2019/09/02 Python
Vans奥地利官方网站:美国原创极限运动潮牌
2018/09/30 全球购物
IdealFit官方网站:女性蛋白质、补充剂和运动服装
2019/03/24 全球购物
递归计算如下递归函数的值(斐波拉契)
2012/02/04 面试题
商务会议邀请函
2014/01/09 职场文书
高中生自我评语大全
2014/01/19 职场文书
爽歪歪广告词
2014/03/20 职场文书
我的中国梦演讲稿初中篇
2014/08/19 职场文书
婚礼答谢词
2015/01/04 职场文书
2016党员三严三实心得体会
2016/01/15 职场文书
Python实现视频中添加音频工具详解
2021/12/06 Python