封装了一个支持匿名函数的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实现类似滑动门切换效果的层切换
Sep 23 Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
Nov 05 Javascript
JS读取XML文件示例代码
Nov 15 Javascript
浅析javascript的间隔调用和延时调用
Nov 12 Javascript
js实现精美的图片跟随鼠标效果实例
May 16 Javascript
JavaScript中调用函数的4种方式代码实例
Jul 08 Javascript
Javascript日期格式化format函数的使用方法
Aug 30 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
Dec 05 Javascript
jQuery实现的事件绑定功能基本示例
Oct 11 jQuery
JS实现图片转换成base64的各种应用场景实例分析
Jun 22 Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 jQuery
vue中用 async/await 来处理异步操作
Jul 18 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快速url重写更新版[需php 5.30以上]
2010/04/25 PHP
PHP并发查询MySQL的实例代码
2017/08/09 PHP
php7新特性的理解和比较总结
2019/04/14 PHP
Laravel 登录后清空COOKIE的操作方法
2019/10/14 PHP
TextArea不支持maxlength的解决办法(jquery)
2011/09/13 Javascript
JavaScript 匿名函数(anonymous function)与闭包(closure)
2011/10/04 Javascript
给jqGrid数据行添加修改和删除操作链接(之一)
2011/11/04 Javascript
js常用数组操作方法简明总结
2014/06/20 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
2014/12/17 Javascript
纯js实现仿QQ邮箱弹出确认框
2015/04/29 Javascript
js+html5实现canvas绘制镂空字体文本的方法
2015/06/05 Javascript
Node.js环境下编写爬虫爬取维基百科内容的实例分享
2016/06/12 Javascript
Node.js下自定义错误类型详解
2016/10/17 Javascript
jquery实现简单的瀑布流布局
2016/12/11 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
2017/04/01 Javascript
深入理解 JavaScript 中的 JSON
2017/04/06 Javascript
[05:11]TI9战队采访——VIRTUSPRO
2019/08/22 DOTA
Python写的Socks5协议代理服务器
2014/08/06 Python
python进程管理工具supervisor的安装与使用教程
2017/09/05 Python
Python数据结构之顺序表的实现代码示例
2017/11/15 Python
Python和Java进行DES加密和解密的实例
2018/01/09 Python
python3 读取Excel表格中的数据
2018/10/16 Python
python打包生成的exe文件运行时提示缺少模块的解决方法
2018/10/31 Python
Python 实现遥感影像波段组合的示例代码
2019/08/04 Python
python实现简单日志记录库glog的使用
2019/12/13 Python
Python实现病毒仿真器的方法示例(附demo)
2020/02/19 Python
Visual Studio Code搭建django项目的方法步骤
2020/09/17 Python
pytorch 移动端部署之helloworld的使用
2020/10/30 Python
html5实现多文件的上传示例代码
2014/02/13 HTML / CSS
诉讼授权委托书范本
2014/10/05 职场文书
党员个人查摆剖析材料
2014/10/16 职场文书
2015年物流客服工作总结
2015/07/27 职场文书
《秋天的雨》教学反思
2016/02/19 职场文书
2016优秀护士先进个人事迹材料
2016/02/25 职场文书
先进个人事迹材料(2016推荐版)
2016/03/01 职场文书
python 爬取天气网卫星图片
2021/06/07 Python