封装了一个支持匿名函数的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实现无刷新DropDownList联动实现代码
Mar 08 Javascript
jQuery1.6 使用方法一
Nov 23 Javascript
jquery 操作两个select实现值之间的互相传递
Mar 07 Javascript
node.js中的Socket.IO使用实例
Nov 04 Javascript
js操作滚动条事件实例
Jan 29 Javascript
浅谈jQuery.easyui的datebox格式化时间
Jun 25 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合
Aug 11 Javascript
Node.js查找当前目录下文件夹实例代码
Mar 07 Javascript
在react-router4中进行代码拆分的方法(基于webpack)
Mar 08 Javascript
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
Jan 30 Javascript
微信小程序自定义toast组件的方法详解【含动画】
May 11 Javascript
vue动态绑定style样式
Apr 20 Vue.js
用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反弹shell实现代码
2009/04/22 PHP
通过PHP修改Linux或Unix口令的方法分享
2012/01/30 PHP
php 参数过滤、数据过滤详解
2015/10/26 PHP
PHP实现文件上传操作和封装
2020/03/04 PHP
菜单效果
2006/10/14 Javascript
Js,alert出现乱码问题的解决方法
2013/06/19 Javascript
火狐textarea输入法的bug的触发及解决
2013/07/24 Javascript
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
2013/09/16 Javascript
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
2014/05/05 Javascript
js函数与php函数的区别实例浅析
2015/01/12 Javascript
实现placeholder效果的方案汇总
2015/06/11 Javascript
js 判断各种数据类型的简单方法(推荐)
2016/08/29 Javascript
简单实现JS倒计时效果
2016/12/23 Javascript
jQuery实现select模糊查询(反射机制)
2017/01/14 Javascript
JavaScript 详解预编译原理
2017/01/22 Javascript
vue.js使用v-if实现显示与隐藏功能示例
2018/07/06 Javascript
JS将时间秒转换成天小时分钟秒的字符串
2019/07/10 Javascript
Python使用MONGODB入门实例
2015/05/11 Python
浅谈Python处理PDF的方法
2017/11/10 Python
Python小游戏之300行代码实现俄罗斯方块
2019/01/04 Python
详解pyppeteer(python版puppeteer)基本使用
2019/06/12 Python
Python 运行.py文件和交互式运行代码的区别详解
2019/07/02 Python
PyCharm汉化安装及永久激活详细教程(靠谱)
2020/01/16 Python
HTML5中FileReader接口使用方法实例详解
2017/08/26 HTML / CSS
加拿大健康、婴儿和美容产品在线购物:Well.ca
2016/11/30 全球购物
Laravel中Kafka的使用详解
2021/03/24 PHP
找工作最新求职信
2013/12/22 职场文书
毕业自我鉴定怎么写
2014/03/25 职场文书
优秀党支部书记事迹材料
2014/05/29 职场文书
婚礼答谢词
2015/01/04 职场文书
家长会开场白和结束语
2015/05/29 职场文书
法人代表证明书范本
2015/06/18 职场文书
详解python中[-1]、[:-1]、[::-1]、[n::-1]使用方法
2021/04/25 Python
css实现左上角飘带效果的完整代码
2022/03/18 HTML / CSS
使用 MybatisPlus 连接 SqlServer 数据库解决 OFFSET 分页问题
2022/04/22 SQL Server
MySQL远程无法连接的一些常见原因总结
2022/09/23 MySQL