封装了一个支持匿名函数的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层次选择器选择元素使用介绍
Apr 18 Javascript
javascript获取xml节点的最大值(实现代码)
Dec 11 Javascript
使用GruntJS构建Web程序之Tasks(任务)篇
Jun 06 Javascript
JavaScript实现的双向跨域插件分享
Jan 31 Javascript
js随机生成字母数字组合的字符串 随机动画数字
Sep 02 Javascript
javascript从作用域链谈闭包
Jul 29 Javascript
javascript的理解及经典案例分析
May 20 Javascript
Javascript小技能总结(推荐)
Jun 02 Javascript
JS简单实现禁止访问某个页面的方法
Sep 13 Javascript
使用vue自定义指令开发表单验证插件validate.js
May 23 Javascript
layui.use模块外部使用其内部定义的js封装函数方法
Sep 16 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
Jan 07 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/11/19 PHP
PHP独立Session数据库存储操作类分享
2014/06/11 PHP
php 处理png图片白色背景色改为透明色的实例代码
2018/12/10 PHP
js 链式延迟执行DOME
2012/01/04 Javascript
js制作的鼠标悬浮时产生的下拉框效果
2012/10/27 Javascript
css如何让浮动元素水平居中
2015/08/07 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
2016/10/13 Javascript
微信小程序表单验证错误提示效果
2017/05/19 Javascript
webpack 2的react开发配置实例代码
2017/07/28 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
2017/09/19 Javascript
vue router-link传参以及参数的使用实例
2017/11/10 Javascript
关于TypeScript模块导入的那些事
2018/06/12 Javascript
JS监听事件的叠加和移除功能
2018/11/19 Javascript
浅谈在Vue.js中如何实现时间转换指令
2019/01/06 Javascript
面试题:react和vue的区别分析
2019/04/08 Javascript
JS操作json对象key、value的常用方法分析
2019/10/29 Javascript
JavaScript如何实现图片处理与合成
2020/05/29 Javascript
用Python制作检测Linux运行信息的工具的教程
2015/04/01 Python
详解Python中find()方法的使用
2015/05/18 Python
利用Python开发微信支付的注意事项
2016/08/19 Python
Python pymongo模块用法示例
2018/03/31 Python
Python实现多条件筛选目标数据功能【测试可用】
2018/06/13 Python
python+django+rest框架配置创建方法
2019/08/31 Python
python3实现高效的端口扫描
2019/08/31 Python
python isinstance函数用法详解
2020/02/13 Python
Python 实现敏感目录扫描的示例代码
2020/05/21 Python
如何利用python读取micaps文件详解
2020/10/18 Python
css3 中实现炫酷的loading效果
2019/04/26 HTML / CSS
无畏的旅行:Intrepid Travel
2017/12/20 全球购物
意大利香水和化妆品购物网站:Parfimo.it
2019/10/06 全球购物
网络研修随笔感言
2014/02/17 职场文书
2014政务公开实施方案
2014/02/19 职场文书
公务员平时考核实施方案
2014/03/11 职场文书
2019送给家人们的中秋节祝福语
2019/08/15 职场文书
2019年学校消防安全责任书(2篇)
2019/10/09 职场文书
5道关于python基础 while循环练习题
2021/11/27 Python