封装了一个支持匿名函数的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 相关文章推荐
经常用的图片在容器中的水平垂直居中实例
Jun 10 Javascript
Display SQL Server Login Mode
Jun 21 Javascript
js原生态函数中使用jQuery中的 $(this)无效的解决方法
May 25 Javascript
基于jQuery实现收缩展开功能
Mar 18 Javascript
JS使用正则表达式过滤多个词语并替换为相同长度星号的方法
Aug 03 Javascript
jQuery验证表单格式的使用方法
Jan 10 Javascript
Node.js 回调函数实例详解
Jul 06 Javascript
在vue中实现点击选择框阻止弹出层消失的方法
Sep 15 Javascript
详解如何构建Promise队列实现异步函数顺序执行
Oct 23 Javascript
微信小程序下拉框搜索功能的实现方法
Jul 31 Javascript
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 jQuery
Rust中的Struct使用示例详解
Aug 14 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
DC《神奇女侠2》因疫情推迟上映 温子仁新恐怖片《恶性》撤档
2020/04/09 欧美动漫
PHP 编写大型网站问题集
2010/05/07 PHP
PHP spl_autoload_register实现自动加载研究
2011/12/06 PHP
PHP 第二节 数据类型之数组
2012/04/28 PHP
跟我学Laravel之安装Laravel
2014/10/15 PHP
Avengerls vs Newbee BO3 第一场2.18
2021/03/10 DOTA
网页中的图片的处理方法与代码
2009/11/26 Javascript
js跳转页面方法总结
2014/01/29 Javascript
Javascript学习笔记之函数篇(四):arguments 对象
2014/11/23 Javascript
js+canvas绘制五角星的方法
2016/01/28 Javascript
Bootstrap 粘页脚效果
2016/03/28 Javascript
Node.js的文件权限及读写flag详解
2016/10/11 Javascript
JS取模、取商及取整运算方法示例
2016/10/13 Javascript
详解VUE调用本地json的使用方法
2019/05/15 Javascript
axios异步提交表单数据的几种方法
2019/08/11 Javascript
layui表格设计以及数据初始化详解
2019/10/26 Javascript
python list 合并连接字符串的方法
2013/03/09 Python
使用python BeautifulSoup库抓取58手机维修信息
2013/11/21 Python
Python使用Srapy框架爬虫模拟登陆并抓取知乎内容
2016/07/02 Python
Python pip安装第三方库实现过程解析
2020/07/09 Python
Python configparser模块应用过程解析
2020/08/14 Python
python实现不同数据库间数据同步功能
2021/02/25 Python
使用CSS3的font-face字体嵌入样式的方法讲解
2016/05/13 HTML / CSS
美国高街时尚品牌:OASAP
2016/07/24 全球购物
纽约州一群才华横溢的金匠制作而成:Hearth Jewelry
2019/03/22 全球购物
.NET笔试题(20个问题)
2016/02/02 面试题
五型班组建设方案
2014/02/10 职场文书
夜不归宿检讨书
2014/02/25 职场文书
机关道德讲堂实施方案
2014/03/15 职场文书
酒店管理专业自荐信
2014/05/23 职场文书
运动会入场口号
2014/06/07 职场文书
贪污受贿检讨书范文
2014/11/19 职场文书
入党宣誓大会后的感想
2015/08/10 职场文书
个人道歉信大全
2019/04/11 职场文书
JavaScript实现复选框全选功能
2021/04/11 Javascript
Python中的变量与常量
2021/11/11 Python