封装了一个支持匿名函数的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实例教程(19) 使用HoTMetal(6)
Dec 23 Javascript
javascript判断ie浏览器6/7版本加载不同样式表的实现代码
Dec 26 Javascript
子页向父页传值示例
Nov 27 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
May 04 Javascript
JS Canvas定时器模拟动态加载动画
Sep 17 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
Nov 22 Javascript
详解js的异步编程技术的方法
Feb 09 Javascript
JavaScript实现左右下拉框动态增删示例
Mar 09 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
Jun 17 Javascript
基于JS对象创建常用方式及原理分析
Jun 28 Javascript
使用ECharts实现状态区间图
Oct 25 Javascript
jQuery实现动态向上滚动
Dec 21 jQuery
用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.ini 中文版
2006/10/28 PHP
查找mysql字段中固定字符串并替换的几个方法
2012/09/23 PHP
PHP的构造方法,析构方法和this关键字详细介绍
2013/10/22 PHP
PHP处理Oracle的CLOB实例
2014/11/03 PHP
PHP实用函数分享之去除多余的0
2015/02/06 PHP
[原创]ThinkPHP中SHOW_RUN_TIME不能正常显示运行时间的解决方法
2015/10/10 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
JavaScript 字符串与数组转换函数[不用split与join]
2009/12/13 Javascript
javascript 用原型继承来实现对象系统
2010/03/22 Javascript
javascript面向对象特性代码实例
2014/06/12 Javascript
原生JavaScript实现合并多个数组示例
2014/09/21 Javascript
jQuery实现切换字体大小的方法
2015/03/10 Javascript
javascript笔记之匿名函数和闭包
2017/02/06 Javascript
Vue中img的src属性绑定与static文件夹实例
2017/05/18 Javascript
详解vue-cli与webpack结合如何处理静态资源
2017/09/19 Javascript
详解微信JS-SDK选择图片遇到的坑
2018/08/15 Javascript
jQuery解析json格式数据示例
2018/09/01 jQuery
js最实用string(字符串)类型的使用及截取与拼接详解
2019/04/26 Javascript
Vue实现可移动水平时间轴
2020/06/29 Javascript
Pyramid Mako模板引入helper对象的步骤方法
2013/11/27 Python
python中使用百度音乐搜索的api下载指定歌曲的lrc歌词
2014/07/18 Python
Python学习教程之常用的内置函数大全
2017/07/14 Python
python按行读取文件,去掉每行的换行符\n的实例
2018/04/19 Python
Python八大常见排序算法定义、实现及时间消耗效率分析
2018/04/27 Python
python模块之subprocess模块级方法的使用
2019/03/26 Python
Django实现跨域请求过程详解
2019/07/25 Python
Python3运算符常见用法分析
2020/02/14 Python
Python编程快速上手——strip()函数的正则表达式实现方法分析
2020/02/29 Python
Python urlencode和unquote函数使用实例解析
2020/03/31 Python
美国休闲服装品牌:Express
2016/09/24 全球购物
美国卡车、吉普车和SUV零件网站:4 Wheel Parts
2016/11/24 全球购物
如何获得EntityManager
2014/02/09 面试题
网站出售协议书范文
2014/10/10 职场文书
公司致全体员工的感谢信
2019/06/24 职场文书
团组织关系介绍信
2019/06/24 职场文书
利用Selenium添加cookie实现自动登录的示例代码(fofa)
2021/05/08 Python