关于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调用WebService的实现代码
Jun 19 Javascript
利用js的Node遍历找到repeater的一个字段实例介绍
Apr 25 Javascript
用jQuery与JSONP轻松解决跨域访问的问题
Feb 04 Javascript
jquery实现效果比较好的table选中行颜色
Mar 25 Javascript
jQuery限制图片大小的方法
May 25 Javascript
深入理解JavaScript中的预解析
Jan 04 Javascript
js学习总结之dom2级事件基础知识详解
Jul 27 Javascript
微信小程序checkbox组件使用详解
Jan 31 Javascript
解决LayUI表单获取不到data的问题
Aug 20 Javascript
react-router-dom 嵌套路由的实现
May 02 Javascript
Jquery Fade用法详解
Nov 06 jQuery
vue+iview实现文件上传
Nov 17 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 iconv 解决utf-8和gb2312编码转换问题
2010/04/12 PHP
PHP用SAX解析XML的实现代码与问题分析
2011/08/22 PHP
PHP中实现crontab代码分享
2015/03/26 PHP
Linux服务器下PHPMailer发送邮件失败的问题解决
2017/03/04 PHP
PHP的mysqli_set_charset()函数讲解
2019/01/23 PHP
PHP配置ZendOpcache插件加速
2019/02/14 PHP
jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
2010/03/21 Javascript
关于javascript中this关键字(翻译+自我理解)
2010/10/20 Javascript
jQuery事件绑定.on()简要概述及应用
2013/02/07 Javascript
Bootstrap表单布局样式源代码
2016/07/04 Javascript
BootStrapTable服务器分页实例解析
2016/12/20 Javascript
基于React实现表单数据的添加和删除详解
2017/03/14 Javascript
angularjs实现简单的购物车功能
2017/09/21 Javascript
vue组件的写法汇总
2018/04/12 Javascript
傻瓜式解读koa中间件处理模块koa-compose的使用
2018/10/30 Javascript
vue无限轮播插件代码实例
2019/05/10 Javascript
vue读取本地的excel文件并显示在网页上方法示例
2019/05/29 Javascript
java实现单链表增删改查的实例代码详解
2019/08/30 Javascript
Vue.js下拉菜单组件使用方法详解
2019/10/19 Javascript
vue实现单一筛选、删除筛选条件
2020/10/26 Javascript
[01:03:42]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python实现提取文章摘要的方法
2015/04/21 Python
探究python中open函数的使用
2016/03/01 Python
调试Django时打印SQL语句的日志代码实例
2019/09/12 Python
TensorFlow命名空间和TensorBoard图节点实例
2020/01/23 Python
Python爬虫爬取博客实现可视化过程解析
2020/06/29 Python
python 实现逻辑回归
2020/12/30 Python
财务会计专业毕业生自荐信
2013/10/02 职场文书
优秀实习生主要事迹
2014/05/29 职场文书
十佳少先队员演讲稿
2014/09/12 职场文书
试用期转正后的自我评价
2014/09/21 职场文书
家庭贫困证明
2014/09/23 职场文书
活动新闻稿范文
2015/07/17 职场文书
导游词之山东孔庙
2019/11/04 职场文书
Golang之sync.Pool使用详解
2021/05/06 Golang
详解Python描述符的工作原理
2021/06/11 Python