关于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 相关文章推荐
jQuery UI AutoComplete 自动完成使用小记
Aug 21 Javascript
jQuery Trim去除字符串首尾空字符的实现方法说明
Feb 11 Javascript
JavaScript将字符串转换为整数的方法
Apr 14 Javascript
JS实现弹出居中的模式窗口示例
Jun 20 Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
Jan 18 Javascript
JS动态生成年份和月份实例代码
Feb 04 Javascript
iscroll.js滚动加载实例详解
Jul 18 Javascript
JS原生数据双向绑定实现代码
Aug 14 Javascript
vue axios 在页面切换时中断请求方法 ajax
Mar 05 Javascript
vue中img src 动态加载本地json的图片路径写法
Apr 25 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
Oct 24 Javascript
解决vue-cli项目开发运行时内存暴涨卡死电脑问题
Oct 29 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删除特定数组内容并且重建数组索引的方法.
2011/03/25 PHP
zf框架的db类select查询器join链表使用示例(zend框架)
2014/03/14 PHP
Yii2下session跨域名共存的解决方案
2017/02/04 PHP
PHP高效获取远程图片尺寸和大小的实现方法
2017/10/20 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
PHP模糊查询技术实例分析【附源码下载】
2019/03/07 PHP
jQuery使用数组编写图片无缝向左滚动
2012/12/11 Javascript
jquery实现div阴影效果示例代码
2013/09/16 Javascript
子页向父页传值示例
2013/11/27 Javascript
JavaScript修改css样式style动态改变元素样式
2013/12/16 Javascript
JavaScript 实现简单的倒计时弹窗DEMO附图
2014/03/05 Javascript
函数式 JavaScript(一)简介
2014/07/07 Javascript
script标签属性用type还是language
2015/01/21 Javascript
Node.js模块封装及使用方法
2016/03/06 Javascript
如何高效率去掉js数组中的重复项
2016/04/12 Javascript
详解jQuery中的deferred对象的使用(一)
2016/05/27 Javascript
动态加载css方法实现和深入解析
2017/01/18 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
2017/06/21 Javascript
在node环境下parse Smarty模板的使用示例代码
2019/11/15 Javascript
JSON 入门教程基础篇 json入门学习笔记
2020/09/22 Javascript
[01:23]2014DOTA2国际邀请赛 球迷无处不在Ti现场世界杯受关注
2014/07/10 DOTA
Python使用win32 COM实现Excel的写入与保存功能示例
2018/05/03 Python
HTML5 Canvas阴影使用方法实例演示
2013/08/02 HTML / CSS
HTML5 实现图片上传预处理功能
2020/02/06 HTML / CSS
白俄罗斯女装和针织品网上商店:Presli.by
2019/10/13 全球购物
澳大利亚最便宜的网上药房:Chemist Warehouse
2020/01/30 全球购物
国际贸易专业个人求职信范文分享
2013/12/14 职场文书
大学校庆策划书
2014/01/31 职场文书
创意广告词
2014/03/17 职场文书
伊索寓言教学反思
2014/05/01 职场文书
硕士生找工作求职信
2014/07/05 职场文书
学习党的群众路线教育实践活动心得体会范文
2014/11/03 职场文书
初中家长评语和期望
2014/12/26 职场文书
后进生评语大全
2015/01/04 职场文书
MySQL8.0.18配置多主一从
2021/06/21 MySQL
Java实现经典游戏泡泡堂的示例代码
2022/04/04 Java/Android