关于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中parent()方法用法实例
Jan 07 Javascript
DOM基础教程之事件类型
Jan 20 Javascript
jQuery定义背景动态切换效果的方法
Mar 23 Javascript
jQuery+css3实现Ajax点击后动态删除功能的方法
Aug 10 Javascript
jquery采用oop模式class类的使用示例
Jan 22 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
Feb 18 Javascript
PHP实现本地图片上传和验证功能
Feb 27 Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
May 09 Javascript
vue-cli之router基本使用方法详解
Oct 17 Javascript
javascript Canvas动态粒子连线
Jan 01 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
Mar 07 Javascript
ant design vue导航菜单与路由配置操作
Oct 28 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的变量类型和作用域详解
2014/03/12 PHP
利用PHP将部分内容用星号替换
2020/04/21 PHP
PHP图形操作之Jpgraph学习笔记
2015/12/25 PHP
设定php简写功能的方法
2019/11/28 PHP
js验证表单第二部分
2006/11/25 Javascript
JavaScript入门教程(11) js事件处理
2009/01/31 Javascript
JS setCapture 区域外事件捕捉
2010/03/18 Javascript
return false;和e.preventDefault();的区别
2010/07/11 Javascript
使用JavaScript检测Firefox浏览器是否启用了Firebug的代码
2010/12/28 Javascript
from 表单提交返回值用post或者是get方法实现
2013/08/21 Javascript
JS判断浏览器是否支持某一个CSS3属性的方法
2014/10/17 Javascript
javascript的tab切换原理与效果实现方法
2015/01/10 Javascript
NodeJS使用jQuery选择器操作DOM
2015/02/13 NodeJs
JQUERY简单按钮轮换选中效果实现方法
2015/05/07 Javascript
JQuery中Text方法用法实例分析
2015/05/18 Javascript
Javascript vue.js表格分页,ajax异步加载数据
2016/10/24 Javascript
JavaScript中常见的八个陷阱总结
2017/06/28 Javascript
基于ES6作用域和解构赋值详解
2017/11/03 Javascript
超出JavaScript安全整数限制的数字计算BigInt详解
2018/06/24 Javascript
jQuery实现ajax的嵌套请求案例分析
2019/02/16 jQuery
使用element-ui +Vue 解决 table 里包含表单验证的问题
2020/07/17 Javascript
Vue实现开关按钮拖拽效果
2020/09/22 Javascript
python matplotlib 注释文本箭头简单代码示例
2018/01/08 Python
selenium在执行phantomjs的API并获取执行结果的方法
2018/12/17 Python
Python给定一个句子倒序输出单词以及字母的方法
2018/12/20 Python
Python猴子补丁知识点总结
2020/01/05 Python
使用Tkinter制作信息提示框
2020/02/18 Python
python批量处理多DNS多域名的nslookup解析实现
2020/06/28 Python
Python爬虫之Selenium多窗口切换的实现
2020/12/04 Python
SmartBuyGlasses英国:购买太阳镜和眼镜
2018/01/29 全球购物
制衣厂各岗位职责
2013/12/02 职场文书
生日寿宴答谢词
2014/01/19 职场文书
庆元旦广播稿
2014/02/10 职场文书
销售内勤岗位职责
2014/04/15 职场文书
2015年妇幼卫生工作总结
2015/05/23 职场文书
幼儿园奖惩制度范本
2015/08/05 职场文书