关于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 相关文章推荐
Using the TextRange Object
Oct 14 Javascript
基于jquery的修改当前TAB显示标题的代码
Dec 11 Javascript
Javascript获取统一管理的提示语(message)
Feb 03 Javascript
详解JavaScript中|单竖杠运算符的使用方法
May 23 Javascript
JS中的数组转变成JSON格式字符串的方法
May 09 Javascript
详解React Native 采用Fetch方式发送跨域POST请求
Nov 15 Javascript
微信小程序wx:for和wx:for-item的用法详解
Apr 01 Javascript
Vue.js 实现数据展示全部和收起功能
Sep 05 Javascript
新手简单了解vue
May 29 Javascript
layui框架与SSM前后台交互的方法
Sep 12 Javascript
vue实现瀑布流组件滑动加载更多
Mar 10 Javascript
vue中defineProperty和Proxy的区别详解
Nov 30 Vue.js
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代码实现中奖概率算法可用于刮刮卡、大转盘等抽奖算法
2015/12/20 PHP
PHP在同一域名下两个不同的项目做独立登录机制详解
2017/09/22 PHP
Phpstorm+Xdebug断点调试PHP的方法
2018/05/14 PHP
php实现等比例压缩图片
2018/07/26 PHP
PHP利用递归函数实现无限级分类的方法
2019/03/22 PHP
如何快速的呈现我们的网页的技巧整理
2007/07/01 Javascript
Javascript 各浏览器的 Javascript 效率对比
2008/01/23 Javascript
JavaScript中出现乱码的处理心得
2009/12/24 Javascript
基于jquery实现图片广告轮换效果代码
2011/07/07 Javascript
jQuery动画与特效详解
2015/02/01 Javascript
jquery实现的3D旋转木马特效代码分享
2015/08/25 Javascript
js实现弹窗居中的简单实例
2016/10/09 Javascript
基于javascript实现按圆形排列DIV元素(三)
2016/12/02 Javascript
JS动态修改网页body的背景色实例代码
2017/10/07 Javascript
angular4中关于表单的校验示例
2017/10/16 Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
2019/03/15 Javascript
微信小程序 轮播图实现原理及优化详解
2019/09/29 Javascript
Python线程中对join方法的运用的教程
2015/04/09 Python
Python中列表的一些基本操作知识汇总
2015/05/20 Python
pyhton中__pycache__文件夹的产生与作用详解
2019/11/24 Python
使用python求解二次规划的问题
2020/02/29 Python
Python如何在循环内使用list.remove()
2020/06/01 Python
css3 2D图片转动样式可以扩充到Js当中
2014/04/29 HTML / CSS
前端H5 Video常见使用场景简介
2020/08/21 HTML / CSS
Cinque网上商店:德国服装品牌
2019/03/17 全球购物
微软加拿大官方网站:Microsoft Canada
2019/04/28 全球购物
关于运动会的稿件
2014/02/02 职场文书
生日宴会主持词
2014/03/20 职场文书
应届生自荐信
2014/06/30 职场文书
合作协议书格式
2014/08/19 职场文书
2014财务年度工作总结
2014/11/11 职场文书
狮子林导游词
2015/02/03 职场文书
车间统计员岗位职责
2015/04/14 职场文书
小学六一儿童节活动总结
2015/05/05 职场文书
肖申克救赎观后感
2015/06/02 职场文书
JavaScript 数组去重详解
2021/09/15 Javascript