封装了一个支持匿名函数的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 相关文章推荐
来自chinaz的ajax获取评论代码
May 03 Javascript
学习ExtJS Column布局
Oct 08 Javascript
JavaScript中的apply()方法和call()方法使用介绍
Jul 25 Javascript
修改js Calendar日历控件 兼容IE9/谷歌/火狐
Jan 04 Javascript
js 动态修改css文件用到了cssRule
Aug 20 Javascript
JS模式之简单的订阅者和发布者模式完整实例
Jun 30 Javascript
jQuery+HTML5美女瀑布流布局实现方法
Sep 21 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
Nov 24 Javascript
Angular4 组件通讯方法大全(推荐)
Jul 12 Javascript
浅谈如何优雅处理JavaScript异步错误
Nov 12 Javascript
Element的el-tree控件后台数据结构的生成以及方法的抽取
Mar 05 Javascript
Vue中key的作用示例代码详解
Jun 10 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
一个更简单的无限级分类菜单代码
2007/01/16 PHP
PHP使用CURL_MULTI实现多线程采集的例子
2014/07/29 PHP
PHP中加速、缓存扩展的区别和作用详解(eAccelerator、memcached、xcache、APC )
2016/07/09 PHP
用php和jQuery来实现“顶”和“踩”的投票功能
2016/10/13 PHP
Yii2使用$this-&gt;context获取当前的Module、Controller(控制器)、Action等
2017/03/29 PHP
ThinkPHP实现图片上传操作的方法详解
2017/05/08 PHP
javascript 表格排序和表头浮动效果(扩展SortTable)
2009/04/07 Javascript
javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)
2009/12/28 Javascript
js onkeypress与onkeydown 事件区别详细说明
2012/12/13 Javascript
js 将json字符串转换为json对象的方法解析
2013/11/13 Javascript
javascript中setTimeout的问题解决方法
2014/05/08 Javascript
在Node.js中实现文件复制的方法和实例
2014/06/05 Javascript
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
2014/10/16 Javascript
JS获取数组最大值、最小值及长度的方法
2015/11/24 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
2016/05/12 Javascript
jQuery+Pdo编写login登陆界面
2016/08/01 Javascript
js实现table添加行tr、删除行tr、清空行tr的简单实例
2016/10/15 Javascript
javascript中this关键字详解
2016/12/12 Javascript
JavaScript递归算法生成树形菜单
2017/08/15 Javascript
使用InstantClick.js让页面提前加载200ms
2017/09/12 Javascript
Javascript 严格模式use strict详解
2017/09/16 Javascript
JS的Ajax与后端交互数据的实例
2018/08/08 Javascript
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
2019/08/20 Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
2021/03/01 Vue.js
[49:20]2014 DOTA2国际邀请赛中国区预选赛5.21 CIS VS TongFu
2014/05/22 DOTA
[02:46]解说DC:感谢430陪伴我们的DOTA2国际邀请赛岁月
2016/06/29 DOTA
[51:28]EG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/16 DOTA
python3 发送任意文件邮件的实例
2018/01/23 Python
Python2中文处理纪要的实现方法
2018/03/10 Python
python基于http下载视频或音频
2018/06/20 Python
python 常用的基础函数
2018/07/10 Python
python设置环境变量的作用和实例
2019/07/09 Python
Python稀疏矩阵及参数保存代码实现
2020/04/18 Python
师范大学应届生求职信
2013/11/21 职场文书
省级优秀毕业生主要事迹
2014/05/29 职场文书
2016中学教师读书心得体会
2016/01/13 职场文书