封装了一个支持匿名函数的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 相关文章推荐
js批量设置样式的三种方法不推荐使用with
Feb 25 Javascript
JS简单的轮播的图片滚动实例
Jun 17 Javascript
利用js实现在浏览器状态栏显示访问者在本页停留的时间
Dec 29 Javascript
javascript 获取函数形参个数
Jul 31 Javascript
jQuery判断当前点击的是第几个li的代码
Sep 26 Javascript
使用jQuery jqPlot插件绘制柱状图
Dec 18 Javascript
创建、调用JavaScript对象的方法集锦
Dec 24 Javascript
深入理解JavaScript中的call、apply、bind方法的区别
May 30 Javascript
Vue组件化通讯的实例代码
Jun 23 Javascript
响应式框架Bootstrap栅格系统的实例
Dec 19 Javascript
手把手带你搭建一个node cli的方法示例
Aug 07 Javascript
js定时器出现第一次延迟的原因及解决方法
Jan 04 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
yii2简单使用less代替css示例
2017/03/10 PHP
PHP面向对象多态性实现方法简单示例
2017/09/27 PHP
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
2009/10/25 Javascript
JQuery 学习笔记01 JQuery初接触
2010/05/06 Javascript
jQuery UI Autocomplete 体验分享
2012/02/14 Javascript
Javascript 闭包引起的IE内存泄露分析
2012/05/23 Javascript
javaScript复制功能调用实现方案
2012/12/13 Javascript
javascript同页面多次调用弹出层具体实例代码
2013/08/16 Javascript
js编码、解码函数介绍及其使用示例
2013/09/05 Javascript
JQuery实现点击div以外的位置隐藏该div窗口
2013/09/13 Javascript
JS中判断null的方法分析
2016/11/21 Javascript
js实现小窗口拖拽效果
2016/12/03 Javascript
JavaScript实现QQ聊天消息展示和评论提交功能
2017/05/22 Javascript
在Vue.js中使用Mixins的方法
2017/09/12 Javascript
浅谈在vue项目中如何定义全局变量和全局函数
2017/10/24 Javascript
JavaScript复制内容到剪贴板的两种常用方法
2018/02/27 Javascript
使用async await 封装 axios的方法
2018/07/09 Javascript
微信小程序实现星级评价效果
2018/12/28 Javascript
详解Python中列表和元祖的使用方法
2015/04/25 Python
Python中模块pymysql查询结果后如何获取字段列表
2017/06/05 Python
python中numpy.zeros(np.zeros)的使用方法
2017/11/07 Python
Python3学习urllib的使用方法示例
2017/11/29 Python
pandas数据处理基础之筛选指定行或者指定列的数据
2018/05/03 Python
pip install python 快速安装模块的教程图解
2019/10/08 Python
Python单例模式的四种创建方式实例解析
2020/03/04 Python
Django在Model保存前记录日志实例
2020/05/14 Python
CSS3动画特效在活动页中的应用
2020/01/21 HTML / CSS
探索HTML5本地存储功能运用技巧
2016/03/02 HTML / CSS
爱普生美国官网:Epson美国
2018/11/05 全球购物
Crocs波兰官方商店:女鞋、男鞋、童鞋、洞洞鞋
2019/10/08 全球购物
学前教育专业毕业生自荐信
2013/10/03 职场文书
奥林匹克运动会口号
2014/06/19 职场文书
士兵突击观后感
2015/06/16 职场文书
2016思想纪律作风整顿心得体会
2016/01/23 职场文书
《狮子和鹿》教学反思
2016/02/16 职场文书
Windows下载并安装MySQL8.0.x 版本的完整教程
2022/04/10 MySQL