DOM2级事件在IE6 7 8下的兼容性问题及解决方案

对于万恶的IE6 7 8 对于DOM2级事件的处理存在很多兼容性问题（以下所说的IE均为 IE6 7 8）

1.在IE下的2级事件绑定使用的是attachEvent()这个方法

2.在IE下给一个事件重复绑定相同的方法，在触发的时候回重复的执行多次

3.在IE下同一个事件绑定的方法超过10个，在触发时 执行的顺序就会变成乱序

4.在IE下给事件绑定的方法里面的this指向的不是要绑定事件的那个元素

问题那么多我们一一解决

为了解决执行顺序的问题 我们可以将所要绑定的事件添加到一个数组中，并在执行的时候，按数组的索引顺序，即 我们绑定的顺序执行

在绑定的时候，为了防止重复绑定，所以我们还需要遍历方法是否重复

而且要改变 所绑定方法的this的指向

并将这些方法也存在 一个全局下都可以访问的数组中，以便在删除的时候找到

具体的解决方法 思路大概就是这样的 ，具体还是看代码吧

function on(ele,type,fn){
//存储要绑定的方法 并且每个事件对应一个存储方法的数组
    if(!ele["aEvent"+type]){
        ele["aEvent"+type]=[];
    }
    var ary=ele["aEvent"+type];
    ary.push(fn);
    bind(ele,type,run);
}
function run(e){
//作为中介让绑定的方法与事件接触
    e=e||window.event;
    if(this["aEvent"+ e.type]){
        if(!e.target){
        //解决IE下的兼容性问题
            e.target= e.srcElement;
            e.pageX=(document.documentElement.scrollLeft||document.body.scrollLeft)+ e.clientX;
            e.pageY=(document.documentElement.scrollTop||document.body.scrollTop)+ e.clientY;
            e.preventDefault=function(){e.returnValue=false};
            //阻止事件默认行为
            e.stopPropagation=function(){e.cancelBubble=true};
            //阻止事件冒泡
        }
        var ary=this["aEvent"+ e.type];
        for(var i=0;i<ary.length;i++){
            if(typeof ary[i]=="function"){
                ary[i].call(this,e)
            }else{
            //在这里删除可以阻止事件
                ary.splice(i,1);
                i--;
            }
        }
    }
}
function bind(ele,type,fn){
    if(ele.addEventListener){
        ele.addEventListener(type,fn,false)
    }else{
        if(!ele["aBind"+type]){
            ele["aBind"+type]=[];
        }
        var ary=ele["aBind"+type];
        for(var i=0;i<ary.length;i++){
            if(ary[i].photo==fn)return;
        }
        var temp=function(){
            fn.call(ele);
        }
        temp.photo=fn;
        ary.push(temp);
        ele.attachEvent("on"+type,temp);

    }
}
function off(ele,type,fn){
    if(ele["aEvent"+type]){
        var ary=ele["aEvent"+type];
        for(var i=0;i<ary.length;i++){
            if(ary[i]==fn){
                ary[i]=null;
            }
        }
    }
}
function changeThis(obj,fn){
    return function(e){fn.call(obj,e)};
}