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)};
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值