关于js注册事件的常用方法


Posted in Javascript onApril 03, 2013

不解释,看代码:

;(function(){
    //进行库封装,防止对象污染
    window['cm']={};
/**
    *给对象注册事件
    */
    var addListener=function(element,type,fn){
        if(typeof element == 'undefined') return false;
        if(element.addEventListener){
            element.addEventListener(type,fn,false);
        }else if(element.attachEvent){
            //将事件缓冲到该标签上,已解决this指向window(现fn内this指向element)和移除匿名事件问题
            var _EventRef='_'+type+'EventRef';
            if(!element[_EventRef]){
                element[_EventRef]=[];
            }
            var _EventRefs=element[_EventRef];
            var index;
            for(index in _EventRefs){
                if(_EventRefs[index]['realFn']==fn){
                    return;
                }
            }
            var nestFn=function(){
                fn.apply(element,arguments);
            };
            element[_EventRef].push({'realFn':fn,'nestFn':nestFn});
            element.attachEvent('on'+type,nestFn);
        }else{
            element['on'+type]=fn;
        }
    };
    window['cm']['addListener']=addListener;
    /**
    *移除对象上已注册事件
    */
    var removeListener=function(element,type,fn){
        if(typeof element == 'undefined') return false;
        if(element.removeEventListener){
            element.removeEventListener(type,fn,false);
        }else if(element.detachEvent){
            var _EventRef='_'+type+'EventRef';
            if(!element[_EventRef]){
                element[_EventRef]=[];
            }
            var _EventRefs=element[_EventRef]
            var index;
            var nestFn;
            for(index in _EventRefs){
                if(_EventRefs[index]['realFn']==fn){
                    nestFn=_EventRefs[index]['nestFn'];
                    if(index==_EventRefs.length-1){
                        element[_EventRef]=_EventRefs.slice(0,index);
                    }else{
                        element[_EventRef]=_EventRefs.slice(0,index).concat(_EventRefs.slice(index+1,_EventRefs.length-1));
                    }
                    break;
                }
            }
            if(nestFn){
                element.detachEvent('on'+type,nestFn);
            }
        }else{
            element['on'+type]=null;
        }
    };
})();

 

Javascript 相关文章推荐
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 06 Javascript
多浏览器兼容性比较好的复制到剪贴板的js代码
Oct 09 Javascript
JS在textarea光标处插入文本的小例子
Mar 22 Javascript
jquery简单实现带渐显效果的选项卡菜单代码
Sep 01 Javascript
Bootstrap Table 删除和批量删除
Sep 22 Javascript
JavaScript实现微信号随机切换代码
Mar 09 Javascript
AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例
Apr 21 Javascript
微信小程序实现漂亮的弹窗效果
May 26 Javascript
Vue创建头部组件示例代码详解
Oct 23 Javascript
微信小程序自定义导航栏
Dec 31 Javascript
配置node服务器并且链接微信公众号接口配置步骤详解
Jun 21 Javascript
vue中提示$index is not defined错误的解决方式
Sep 02 Javascript
JavaScript栏目列表隐藏/显示简单实现
Apr 03 #Javascript
JS模板实现方法
Apr 03 #Javascript
JS实现标签页效果(配合css)
Apr 03 #Javascript
JS实现下拉框的动态添加(附效果)
Apr 03 #Javascript
js去字符串前后空格5种实现方法及比较
Apr 03 #Javascript
终于解决了IE8不支持数组的indexOf方法
Apr 03 #Javascript
jQuery布局插件UI Layout简介及使用方法
Apr 03 #Javascript
You might like
PHP实现模仿socket请求返回页面的方法
2014/11/04 PHP
php中文字符串截取多种方法汇总
2016/10/06 PHP
浅析javascript闭包 实例分析
2010/12/25 Javascript
js获取和设置属性的方法
2014/02/20 Javascript
给js文件传参数(详解)
2014/07/13 Javascript
jQuery实现平滑滚动到指定锚点的方法
2015/03/20 Javascript
JavaScript使用Prototype实现面向对象的方法
2015/04/14 Javascript
javascript鼠标滑动评分控件完整实例
2015/05/13 Javascript
javascript函数式编程程序员的工具集
2015/10/11 Javascript
JavaScript数据推送Comet技术详解
2016/04/07 Javascript
js模块加载方式浅析
2017/08/12 Javascript
jQuery实现页码跳转式动态数据分页
2017/12/31 jQuery
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
2018/01/09 Javascript
分享vue里swiper的一些坑
2018/08/30 Javascript
vue给组件传递不同的值方法
2018/09/29 Javascript
koa-router路由参数和前端路由的结合详解
2019/05/19 Javascript
Nuxt页面级缓存的实现
2020/03/09 Javascript
简单了解three.js 着色器材质
2020/08/03 Javascript
Python解析网页源代码中的115网盘链接实例
2014/09/30 Python
Python实现的随机森林算法与简单总结
2018/01/30 Python
python 调用钉钉机器人的方法
2019/02/20 Python
Django 内置权限扩展案例详解
2019/03/04 Python
keras topN显示,自编写代码案例
2020/07/03 Python
windows+vscode安装paddleOCR运行环境的步骤
2020/11/11 Python
Pytest测试框架基本使用方法详解
2020/11/25 Python
Happy Socks英国官网:购买五颜六色的袜子
2020/11/03 全球购物
优秀党员转正的自我评价
2013/10/06 职场文书
新三好学生主要事迹
2014/01/23 职场文书
退休感言
2014/01/28 职场文书
《赠汪伦》教学反思
2014/04/12 职场文书
初级党校心得体会
2014/09/11 职场文书
预备党员自我评价范文
2015/03/04 职场文书
2015年青年教师工作总结
2015/05/25 职场文书
大学生自我鉴定怎么写
2019/05/07 职场文书
演讲稿之开卷有益
2019/08/07 职场文书
Go语言实现Base64、Base58编码与解码
2021/07/26 Golang