关于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事件模型代码
Jul 01 Javascript
Iframe 自适应高度并实时监控高度变化的js代码
Oct 30 Javascript
javascript 哈希表(hashtable)的简单实现
Jan 20 Javascript
jquery.qrcode在线生成二维码使用示例
Aug 21 Javascript
jquery如何实现锚点链接之间的平滑滚动
Dec 02 Javascript
javascript实现根据3原色制作颜色选择器的方法
Jul 17 Javascript
浅谈javascript中replace()方法
Nov 10 Javascript
jquery中关于bind()方法的使用技巧分享
Mar 30 jQuery
JS原生带小白点轮播图实例讲解
Jul 22 Javascript
react-native使用react-navigation进行页面跳转导航的示例
Sep 07 Javascript
vue2.0 + ele的循环表单及验证字段方法
Sep 18 Javascript
element-ui点击查看大图的方法示例
Dec 14 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
声音就能俘获人心,蕾姆,是哪个漂亮小姐姐配音呢?
2020/03/03 日漫
星际玩家的三大定律
2020/03/04 星际争霸
simplehtmldom Doc api帮助文档
2012/03/26 PHP
php实现快速排序法函数代码
2012/08/27 PHP
PHP 安全检测代码片段(分享)
2013/07/05 PHP
YII2框架中使用yii.js实现的post请求
2017/04/09 PHP
PHPTree――php快速生成无限级分类
2018/03/30 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
Extjs4 GridPanel的主要配置参数详细介绍
2013/04/18 Javascript
Node.js中使用mongoskin操作mongoDB实例
2014/09/28 Javascript
require.js的用法详解
2015/10/20 Javascript
总结JavaScript三种数据存储方式之间的区别
2016/05/03 Javascript
Ajax+FormData+javascript实现无刷新表单信息提交
2016/10/24 Javascript
jQuery的事件预绑定
2016/12/05 Javascript
AngularJS实践之使用ng-repeat中$index的注意点
2016/12/22 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
2017/09/28 Javascript
微信小程序实现文字无限轮播效果
2018/12/28 Javascript
jQuery AJAX与jQuery事件的分析讲解
2019/02/18 jQuery
JS正则表达式验证端口范围(0-65535)
2020/01/06 Javascript
Vue 组件的挂载与父子组件的传值实例
2020/09/02 Javascript
python 对key为时间的dict排序方法
2018/10/17 Python
python将excel转换为csv的代码方法总结
2019/07/03 Python
Django 外键的使用方法详解
2019/07/19 Python
python爬虫爬取笔趣网小说网站过程图解
2019/11/18 Python
解决TensorFlow模型恢复报错的问题
2020/02/06 Python
css3圆角边框和边框阴影示例
2014/05/05 HTML / CSS
台湾最大银发乐活百货:乐龄网
2018/05/21 全球购物
巴西最大的珠宝连锁店:Vivara
2019/04/18 全球购物
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2016/01/06 面试题
小学生打架检讨书
2014/01/26 职场文书
酒店保安领班职务说明书
2014/03/04 职场文书
《故乡》教学反思
2014/04/10 职场文书
教师中国梦演讲稿
2014/04/23 职场文书
微电影大赛策划方案
2014/06/05 职场文书
仙境之桥观后感
2015/06/16 职场文书
java设计模式--七大原则详解
2021/07/21 Java/Android