封装了一个支持匿名函数的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 相关文章推荐
利用webqq协议使用python登录qq发消息源码参考
Apr 08 Javascript
JavaScript中的方法重载实例
Mar 16 Javascript
javascript事件委托的方式绑定详解
Jun 10 Javascript
根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)
Sep 14 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
May 23 Javascript
jquery datatable服务端分页
Aug 31 Javascript
深入理解ES6学习笔记之块级作用域绑定
Aug 19 Javascript
Javascript中将变量转换为字符串的三种方法
Sep 19 Javascript
JS实现网页抢购功能(触发,终止脚本)
Nov 27 Javascript
详解JS中统计函数执行次数与执行时间
Sep 04 Javascript
Vue.js实现tab切换效果
Jul 24 Javascript
vue实现文字加密功能
Sep 27 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
set_include_path在win和linux下的区别
2008/01/10 PHP
php制作动态随机验证码
2015/02/12 PHP
浅谈PHP中的面向对象OOP中的魔术方法
2017/06/12 PHP
php依赖注入知识点详解
2019/09/23 PHP
HTML-CSS群中单选引发的“事件”
2007/03/05 Javascript
javascript Array数组对象的扩展函数代码
2010/05/22 Javascript
图片img的src不变让浏览器重新加载实现方法
2013/03/29 Javascript
Jquery插件easyUi表单验证提交(示例代码)
2013/12/30 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
2014/05/12 Javascript
js实现点击添加一个input节点
2014/12/05 Javascript
Vue.js每天必学之构造器与生命周期
2016/09/05 Javascript
JavaScript 实现的checkbox经典实例分享
2016/10/16 Javascript
Vue中建立全局引用或者全局命令的方法
2017/08/21 Javascript
利用Node.js了解与测量HTTP所花费的时间详解
2017/09/22 Javascript
JS Testing Properties 判断属性是否在对象里的方法
2017/10/01 Javascript
angular的输入和输出的使用方法
2018/09/22 Javascript
ES6 新增的创建数组的方法(小结)
2019/08/01 Javascript
vue父子组件通信的高级用法示例
2019/08/29 Javascript
js数据类型转换与流程控制操作实例分析
2019/12/18 Javascript
为什么JavaScript中0.1 + 0.2 != 0.3
2020/12/03 Javascript
python简单获取数组元素个数的方法
2015/07/13 Python
Python使用os模块和fileinput模块来操作文件目录
2016/01/19 Python
python代码打印100-999之间的回文数示例
2019/11/24 Python
tensorflow实现对张量数据的切片操作方式
2020/01/19 Python
python模块如何查看
2020/06/16 Python
Python 中如何写注释
2020/08/28 Python
python爬虫scrapy图书分类实例讲解
2020/11/23 Python
浅析Python的命名空间与作用域
2020/11/25 Python
css3 伪类选择器快速复习小结
2019/09/10 HTML / CSS
2014年上半年工作自我评价
2014/01/18 职场文书
计划生育标语
2014/06/23 职场文书
公司领导九九重阳节发言稿2014
2014/09/25 职场文书
学生穿着不得体检讨书
2014/10/12 职场文书
2014年英语工作总结
2014/12/20 职场文书
厉行节约工作总结
2015/08/12 职场文书
62句有关感恩节文案(推荐收藏)
2019/11/28 职场文书