完美/兼容版添加事件以及删除事件

IE与现代浏览器添加事件和删除事件的方法存在一定缺陷

现代浏览器自带的方法：addEventListener&removeEventListener

IE浏览器自带的方法：attachEvent&detachEvent

 

IE版本存在问题有以下几个：

1.一个对象有多个事件执行的顺序与现代浏览器的执行顺序相反

2.多个相同事件相同方法多次执行并不能只能的判断

3.内存泄漏的问题

4.this对象的传递问题

一下是封装的一个ie的兼容版本（感谢李炎恢老师的视屏课程）

//设置初始的事件函数ID,利用对象的方法减少全局变量的混乱
addEvent.ID = 1;
//执行事件函数
addEvent.exec = function(ev){
    //兼容阻止冒泡与默认事件的方法addEvent.fixEvent 这样可以直接在外使用ev.preventDefault()与ev.stopPropagation()
    var E = ev || addEvent.fixEvent(window.event);
    //因为是使用的对象属性来传递参数所以可以使用this.event[E.type]
    //E.type是获取事件名的方法比如'click'
    //其中this表示的是执行函数的那个对象
    var attr = this.events[E.type];
    for(var i in attr){
        //把这个函数call给执行的那个对象'this' 第二个参数传递的是event对象
        attr[i].call(this,E);
    }
}
//判断事件函数是否相同
addEvent.equal = function(attr,fn){
    for(var i in attr){
        //如果数组中有和当前传入函数相等的函数那么就返回true上一层接收到true执行返回false这样跳出函数执行
        if(attr[i] == fn){
            return true;
        }
    }
    return false;
}
//添加阻止默认事件
addEvent.fixEvent = function(){
    //阻止默认事件
    this.preventDefault = addEvent.fixEvent.preventDefault;
    //阻止事件冒泡
    this.stopPropagation = addEvent.fixEvent.stopPropagation;
}
//阻止默认事件
addEvent.fixEvent.preventDefault = function(){
    this.returnValue = false;
}
//阻止事件冒泡
addEvent.fixEvent.stopPropagation = function(){
    this.cancelBubble = true;
}
//跨浏览器添加事件
function addEvent(obj,type,fn){
    if(typeof obj.addEventListener != 'undefined'){
        obj.addEventListener(type,fn,false);
    }else{
        //创建一个存放事件的容器
        if(!obj.events){
            obj.events = {};
        }
        //第一次执行函数时执行的内容
        if(!obj.events[type]){
            //创建一个事件函数存放的数组容器
            obj.events[type] = [];
            //存放第一个事件函数
            obj.events[type][0] = fn;
        }else{
            //如果判断出传入函数与库中有冲突那么直接跳出函数执行
            if(addEvent.equal(obj.events[type],fn)){
                return false;
            }
            //执行把函数储存到数组中
            obj.events[type][addEvent.ID++] = fn;
        }
        //执行事件函数
        obj['on'+type] = addEvent.exec;
    }
}
//跨浏览器删除事件
function removeEvent(obj,type,fn){
    if(typeof obj.removeEventListener != 'undefined'){
        obj.removeEventListener(type,fn,false);
    }else{
        for(var i in obj.events[type]){
            //把对象中的函数数组拿出来进行比较如果有符合要求的函数则执行删除程序
            if(obj.events[type][i] == fn){
                delete obj.events[type][i];
            }
        }
    }

完整代码

 

转载于:https://www.cnblogs.com/BobSky/archive/2013/05/31/3110380.html