封装了一个支持匿名函数的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 event 事件解析
Jan 31 Javascript
javascript分页代码(当前页码居中)
Sep 20 Javascript
Javascript中查找不以XX字符结尾的单词示例代码
Oct 15 Javascript
解决JQeury显示内容没有边距内容紧挨着浏览器边线
Dec 20 Javascript
Javascript遍历table中的元素示例代码
Jul 08 Javascript
vue富文本编辑器组件vue-quill-edit使用教程
Sep 21 Javascript
laydate时间日历插件使用方法详解
Nov 14 Javascript
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
Nov 21 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
Dec 11 Javascript
微信小程序自定义可滑动日历界面
Dec 28 Javascript
微信小程序全选多选效果实现代码解析
Jan 21 Javascript
Vue使用预渲染代替SSR的方法
Jul 02 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
提问的智慧
2006/10/09 PHP
CodeIgniter 完美解决URL含有中文字符串
2016/05/13 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
Laravel框架实现model层的增删改查(CURD)操作示例
2018/05/12 PHP
php将从数据库中获得的数据转换成json格式并输出的方法
2018/08/21 PHP
Javascript alert消息换行的方法
2013/08/07 Javascript
jQuery中:input选择器用法实例
2015/01/03 Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
2016/07/22 Javascript
轻松掌握JavaScript策略模式
2016/08/25 Javascript
PHPStorm中如何对nodejs项目进行单元测试详解
2019/02/28 NodeJs
js字符串处理之绝妙的代码
2019/04/05 Javascript
解决layer弹出层自适应页面大小的问题
2019/09/16 Javascript
vue的三种图片引入方式代码实例
2019/11/19 Javascript
Python通过PIL获取图片主要颜色并和颜色库进行对比的方法
2015/03/19 Python
低版本中Python除法运算小技巧
2015/04/05 Python
在Python中操作列表之list.extend()方法的使用
2015/05/20 Python
windows 下python+numpy安装实用教程
2017/12/23 Python
分享Pycharm中一些不为人知的技巧
2018/04/03 Python
Python类装饰器实现方法详解
2018/12/21 Python
python实现切割url得到域名、协议、主机名等各个字段的例子
2019/07/25 Python
python装饰器练习题及答案
2019/11/01 Python
Python创建数字列表的示例
2019/11/28 Python
python针对Oracle常见查询操作实例分析
2020/04/30 Python
python实现双人五子棋(终端版)
2020/12/30 Python
如何用Python编写一个电子考勤系统
2021/02/08 Python
外语学院毕业生的自我鉴定
2013/11/28 职场文书
查环查孕证明
2014/01/10 职场文书
宾馆总经理岗位职责
2014/02/14 职场文书
自荐信的格式
2014/03/10 职场文书
植树节活动总结
2014/04/30 职场文书
房屋财产继承协议书范本
2014/11/03 职场文书
职工年度考核评语
2014/12/31 职场文书
2016年猴年新春致辞
2015/08/01 职场文书
离职员工给领导和同事的感谢信
2015/11/03 职场文书
信息技术研修心得体会
2016/01/08 职场文书
十大最强妖精系宝可梦,哲尔尼亚斯实力最强,第五被称为大力士
2022/03/18 日漫