JavaScript DOM2事件绑定的兼容性总结

🌙
手机阅读
本文目录结构

DOM2事件绑定的兼容性总结

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<ol>
    **DOM2事件绑定的兼容性总结,IE是指低版本IE**:


    1. 方法不同,一个是(addEventListener/removeEventListener),IE是(attachEvent/detachEvent)
    2. IE里被绑定上的方法,this关键字指向window;
    3. IE里执行的顺序是混乱的
    4. IE里的方法是可以被重复绑定的;
    5. 事件对象本身,IE是全局的时间对象window.event;其他的是系统自动传的
    6. 事件源:标准浏览器是e.target;IE是srcElement;
    7. 阻止事件的默认行为:标准浏览器是e.preventDefault(),IE是returnValue=false;
    8. 在所有浏览器中,如果用DOM0的方式来绑定,方法里面用return false也可以阻止默认行为的;这个是可以阻止DOM0的,如果是DOM2级的就不可以了
    8. 阻止事件的传播:标准浏览器是e.stopPropagation();IE是cancelBubble=true;
    9. e.pageX,e.pageY,这两个属性IE不支持;
    10. IE不支持捕获,只能支持冒泡;所以标准浏览器绑定和解绑第三个参数是false,第三个参数不写,也是没问题的;
</ol>
</body>
</html>

兼容性解决this关键字

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>this关键字</title>
    <style>
        #div1{width: 100px;height: 100px;background: orange;}
    </style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
<script>
    var oDiv=document.getElementById("div1");




    function bind1(ele,type,fn){
        if(ele.addEventListener){
            ele.addEventListener(type,fn);
        }else{
            //解决关键字,与call,apply有关
            //ele.attachEvent("on"+type,fn.call(ele));//这样不可以的,因为会直接执行;
            ele.attachEvent("on"+type,function(){fn.call(ele)});//改变fn的this关键字;
        }
    };
    function unbind1(ele,type,fn){
        if(ele.removeEventListener){
            ele.removeEventListener(type,fn,false);
        }else{
            ele.detachEvent("on"+type,fn)
        }
    }
    /*改1的,解决了this关键字问题,但是解绑的时候,解除不掉了*/
    /*改2*/
    function bind2(ele,type,fn){
        if(ele.addEventListener){
            ele.addEventListener(type,fn);
        }else{
            var fnTemp=function(){fn.call(ele)};//解决fn的this关键字
            var oBind=ele.myBind;
            if(!oBind){//避免多次创建,防止覆盖原来第一次创建的数组;
                oBind=[];
            }
            for (var i=0;i< oBind.length;i++){//防止重复绑定的;
                if(oBind[i].flag==fn){
                    return;
                }
            }
            oBind.push(fnTemp);
            fnTemp.flag=fn;//flag是识别符号;是为了解绑的时候,可以找到解绑目标;因为fn是函数,属于引用类型数据,不能和fn相等;fn!==fn;所以在上面加了一个flag;方面解绑来解除
            ele.attachEvent("on"+type,fnTemp);//改变fn的this关键字;
        }
    };
    function unbind2(ele,type,fn){
        if(ele.removeEventListener){
            ele.removeEventListener(type,fn,false);
        }else{
            var oBind=ele.myBind;
            if(oBind&& oBind.length){
                for(var i=0;i< oBind.length;i++){
                    if(oBind[i].flag===fn){//a[i]和fnTemp是一样的;a[i].flag相当于fnTemp.flag
                        ele.detachEvent("on"+type,oBind[i]);//a[i]就是化妆后的fn;
                        oBind.splice(i,1);//一个方法只能绑定一个一次,所以要删除绑定过的;
                        return;

                    }
                }
            }
        }
    };
    /*改2里面如果给oDiv的onclick绑定fn1,那么在oDiv的onmouseover就不能继续绑定fn1了,因为他们公用一个数组*/

    /*下面是成功的了,最终的*/
    /*****改3*/
    function bind3(ele,type,fn){
        if(ele.addEventListener){
            ele.addEventListener(type,fn);
        }else{
            var fnTemp=function(){fn.call(ele)};//解决fn的this关键字
            /*下面是标示,是为了解绑做铺垫的;*/
            if(!ele["myBind"+type]){//避免多次创建,防止覆盖原来第一次创建的数组;
                ele["myBind"+type]=[];
            }
            var oBind=ele["myBind"+type];
            for (var i=0;i< oBind.length;i++){//防止重复绑定的;
                if(oBind[i].flag==fn){
                    return;
                }
            }
            oBind.push(fnTemp);
            fnTemp.flag=fn;
            ele.attachEvent("on"+type,fnTemp);
        }
    };
    function unbind3(ele,type,fn){
        if(ele.removeEventListener){
            ele.removeEventListener(type,fn);
            console.log("标准浏览器的"+type+"已经解绑!")
        }else{
            console.log("IE6/7/8的"+type+"已经解绑!")
            var oBind=ele["myBind"+type];
            if(oBind&& oBind.length){
                for(var i=0;i< oBind.length;i++){
                    /*下面是确定要解绑的fn;*/
                    if(oBind[i].flag===fn){
                        ele.detachEvent("on"+type,oBind[i]);
                        oBind.splice(i,1);
                        return;
                    }
                }
            }
        }
    };


    bind3(oDiv,"click",fn1);
    bind3(oDiv,"mouseover",fn1);
    var num=0;
    function fn1(){
        num++;
        this.innerHTML="改变this关键字"+num;
        if(num==5){
            console.log("解除绑定的函数");
            unbind3(oDiv,"click",fn1);
            unbind3(oDiv,"mouseover",fn1);
        }
    }

    function fn4(){
        num+=1;
        if(num==3){
            unbind(this,"click",fn1);//移除
        }
        console.log("4");
    };
</script>

兼容性解决执行顺序

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>执行顺序</title>
    <style>
        #div1{width: 100px;height: 100px;background: orange;}
    </style>
</head>
<body>
<div id="div1"></div>
低版本的IE事件,如果超过9个就会混乱了;9个内是倒序的;
</body>
</html>
<script>
    /*下面是解决好this关键字的了,最终的*/
    function bind3(ele,type,fn){
        if(ele.addEventListener){
            ele.addEventListener(type,fn);
        }else{
            var fnTemp=function(){fn.call(ele)};//解决fn的this关键字
            /*下面是标示,是为了解绑做铺垫的;*/
            if(!ele["myBind"+type]){//避免多次创建,防止覆盖原来第一次创建的数组;
                ele["myBind"+type]=[];
            }
            var oBind=ele["myBind"+type];
            for (var i=0;i< oBind.length;i++){//防止重复绑定的;
                if(oBind[i].flag==fn){
                    return;
                }
            }
            oBind.push(fnTemp);
            fnTemp.flag=fn;
            ele.attachEvent("on"+type,fnTemp);
        }
    };
    function unbind3(ele,type,fn){
        if(ele.removeEventListener){
            ele.removeEventListener(type,fn);
            console.log("标准浏览器的"+type+"已经解绑!")
        }else{
            console.log("IE6/7/8的"+type+"已经解绑!")
            var oBind=ele["myBind"+type];
            if(oBind&& oBind.length){
                for(var i=0;i< oBind.length;i++){
                    /*下面是确定要解绑的fn;*/
                    if(oBind[i].flag===fn){
                        ele.detachEvent("on"+type,oBind[i]);
                        oBind.splice(i,1);
                        return;
                    }
                }
            }
        }
    };



    /*下面是解决执行顺序的方案IE678*/

    var oDiv=document.getElementById("div1");
    var type="click";
    oDiv["aEvent"+type]=[];
    oDiv["aEvent"+type].push(fn1);
    oDiv["aEvent"+type].push(fn2);
    oDiv["aEvent"+type].push(fn3);
    oDiv["aEvent"+type].push(fn4);
    oDiv["aEvent"+type].push(fn5);
    oDiv["aEvent"+type].push(fn6);
    oDiv["aEvent"+type].push(fn7);
    oDiv["aEvent"+type].push(fn8);
    oDiv["aEvent"+type].push(fn9);
    oDiv["aEvent"+type].push(fn10);

    bind3(oDiv,type,run);
    /*绑定给run;然后由函数run统一来调*/
    function run(){
        console.log("执行run方法");
        var a=this["aEvent"+window.event.type];//因为做IE的,所以写window.event
        for(var i=0;i< a.length;i++){
            //a[i]();//这样是不行的虽然顺序解决了,但是IE的this还是不对了;
            a[i].call(this);//这样就可以了
        }
    }



    function fn1(){console.log("执行函数fn1")}
    function fn2(){console.log("执行函数fn2")}
    function fn3(){console.log("执行函数fn3")}
    function fn4(){console.log("执行函数fn4")}
    function fn5(){console.log("执行函数fn5")}
    function fn6(){console.log("执行函数fn6")}
    function fn7(){console.log("执行函数fn7")}
    function fn8(){console.log("执行函数fn8")}
    function fn9(){console.log("执行函数fn9")}
    function fn10(){console.log("执行函数fn10")}
</script>

兼容性解决执行顺序–2封装

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>执行顺序</title>
    <style>
        #div1{width: 100px;height: 100px;background: orange;}
    </style>
</head>
<body>
<div id="div1"></div>
低版本的IE事件,如果超过9个就会混乱了;9个内是倒序的;
</body>
</html>
<script>
    /*下面是解决好this关键字的了,最终的*/
    function bind3(ele,type,fn){
        if(ele.addEventListener){
            ele.addEventListener(type,fn);
        }else{
            var fnTemp=function(){fn.call(ele)};//解决fn的this关键字
            /*下面是标示,是为了解绑做铺垫的;*/
            if(!ele["myBind"+type]){//避免多次创建,防止覆盖原来第一次创建的数组;
                ele["myBind"+type]=[];
            }
            var oBind=ele["myBind"+type];
            for (var i=0;i< oBind.length;i++){//防止重复绑定的;
                if(oBind[i].flag==fn){
                    return;
                }
            }
            oBind.push(fnTemp);
            fnTemp.flag=fn;
            ele.attachEvent("on"+type,fnTemp);
        }
    };
    function unbind3(ele,type,fn){
        if(ele.removeEventListener){
            ele.removeEventListener(type,fn);
            console.log("标准浏览器的"+type+"已经解绑!")
        }else{
            console.log("IE6/7/8的"+type+"已经解绑!")
            var oBind=ele["myBind"+type];
            if(oBind&& oBind.length){
                for(var i=0;i< oBind.length;i++){
                    /*下面是确定要解绑的fn;*/
                    if(oBind[i].flag===fn){
                        ele.detachEvent("on"+type,oBind[i]);
                        oBind.splice(i,1);
                        return;
                    }
                }
            }
        }
    };



    /*下面是解决一个元素同一类似事件的执行顺序*/

    var oDiv=document.getElementById("div1");
    function on(ele,type,fn){
        if(!ele["aEvent"+type]){
            ele["aEvent"+type]=[];
        }
        var aryEvent=ele["aEvent"+type];
        for(var i=0;i<aryEvent.length;i++){//防止同一个方法被同事件绑定;
            if(aryEvent[i]==fn)return;
        }
        aryEvent.push(fn);
        bind3(ele,type,run);//只会执行一次
    }

    function off(ele,type,fn){
        if(ele["aEvent"+type]){
            var aryEvent=ele["aEvent"+type];
            for(var i=0;i<aryEvent.length;i++){
                if(a[i]==fn){
                    aryEvent.splice(i,1);//会造成数组塌陷;
                    return;
                }
            }
        }
    }



    on(oDiv,"click",fn1);
    on(oDiv,"click",fn2);
    on(oDiv,"click",fn3);
    on(oDiv,"click",fn4);
    on(oDiv,"click",fn5);
    on(oDiv,"click",fn6);
    on(oDiv,"click",fn7);
    on(oDiv,"click",fn8);
    on(oDiv,"click",fn9);
    on(oDiv,"click",fn10);


    function run(e){
        e=e||window.event;
        var a=this["aEvent"+e.type];
        for(var i=0;i< a.length;i++){
            a[i].call(this);
        }
    }



    function fn1(){console.log("执行函数fn1")}
    function fn2(){console.log("执行函数fn2")}
    function fn3(){console.log("执行函数fn3")}
    function fn4(){console.log("执行函数fn4")}
    function fn5(){console.log("执行函数fn5")}
    function fn6(){console.log("执行函数fn6")}
    function fn7(){console.log("执行函数fn7")}
    function fn8(){console.log("执行函数fn8")}
    function fn9(){console.log("执行函数fn9")}
    function fn10(){console.log("执行函数fn10")}
</script>

off和run执行时数组塌陷问题

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>执行顺序</title>
    <style>
        #div1{width: 100px;height: 100px;background: orange;}
    </style>
</head>
<body>
<div id="div1"></div>
低版本的IE事件,如果超过9个就会混乱了;9个内是倒序的;
</body>
</html>
<script>
    /*下面是解决好this关键字的了,最终的*/
    function bind3(ele,type,fn){
        if(ele.addEventListener){
            ele.addEventListener(type,fn);
        }else{
            var fnTemp=function(){fn.call(ele)};//解决fn的this关键字
            /*下面是标示,是为了解绑做铺垫的;*/
            if(!ele["myBind"+type]){//避免多次创建,防止覆盖原来第一次创建的数组;
                ele["myBind"+type]=[];
            }
            var oBind=ele["myBind"+type];
            for (var i=0;i< oBind.length;i++){//防止重复绑定的;
                if(oBind[i].flag==fn){
                    return;
                }
            }
            oBind.push(fnTemp);
            fnTemp.flag=fn;
            ele.attachEvent("on"+type,fnTemp);
        }
    };
    function unbind3(ele,type,fn){
        if(ele.removeEventListener){
            ele.removeEventListener(type,fn);
            console.log("标准浏览器的"+type+"已经解绑!")
        }else{
            console.log("IE6/7/8的"+type+"已经解绑!")
            var oBind=ele["myBind"+type];
            if(oBind&& oBind.length){
                for(var i=0;i< oBind.length;i++){
                    /*下面是确定要解绑的fn;*/
                    if(oBind[i].flag===fn){
                        ele.detachEvent("on"+type,oBind[i]);
                        oBind.splice(i,1);
                        return;
                    }
                }
            }
        }
    };
    /*下面是解决一个元素同一类似事件的执行顺序*/

    var oDiv=document.getElementById("div1");
    function on(ele,type,fn){
        if(!ele["aEvent"+type]){
            ele["aEvent"+type]=[];
        }
        var aryEvent=ele["aEvent"+type];
        for(var i=0;i<aryEvent.length;i++){//防止同一个方法被同事件绑定;
            if(aryEvent[i]==fn)return;
        }
        aryEvent.push(fn);
        bind3(ele,type,run);//只会执行一次
    }

    function off(ele,type,fn){
        if(ele["aEvent"+type]){
            var aryEvent=ele["aEvent"+type];
            for(var i=0;i<aryEvent.length;i++){
                if(a[i]==fn){
//                    aryEvent.splice(i,1);//数组塌陷
                    a[i]=null;
                    return;
                }
            }
        }
    }


    function run(e){
        e=e||window.event;
        var a=this["aEvent"+e.type];
        for(var i=0;i< a.length;){
            /*下面是防止数组塌陷的*/
            if(typeof a[i]="function"){
                a[i].call(this);
                i++
            }else{
                /*如果是空的,删掉;不删也是可以的*/
                a.splice(i,1);
            }
        }
    }

    on(oDiv,"click",fn1);
    on(oDiv,"click",fn2);
    on(oDiv,"click",fn3);
    on(oDiv,"click",fn4);
    on(oDiv,"click",fn5);
    on(oDiv,"click",fn6);
    on(oDiv,"click",fn7);
    on(oDiv,"click",fn8);
    on(oDiv,"click",fn9);
    on(oDiv,"click",fn10);






    function fn1(){console.log("执行函数fn1")}
    function fn2(){console.log("执行函数fn2")}
    function fn3(){console.log("执行函数fn3")}
    function fn4(){console.log("执行函数fn4")}
    function fn5(){console.log("执行函数fn5")}
    function fn6(){console.log("执行函数fn6")}
    function fn7(){console.log("执行函数fn7")}
    function fn8(){console.log("执行函数fn8")}
    function fn9(){console.log("执行函数fn9")}
    function fn10(){console.log("执行函数fn10")}
</script>

解决全部兼容性问题

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>执行顺序</title>
    <style>
        #div1{width: 100px;height: 100px;background: orange;}
    </style>
</head>
<body>
<div id="div1">
    <a href="http://broszhu.com/">朱安邦的博客</a>
</div>
</body>
</html>
<script>
    var oDiv=document.getElementById("div1");
    var oA=oDiv.getElementsByTagName("a")[0];

    //on(oA,"click",fnTest);//只能监测A的
    on(document.documentElement,"click",fnTest);//可以检测DIV,BODY,HTML;


    function fnTest(e){
        /*不需要写window.event了,因为在run里已经解决了*/
        console.log(this);
        console.log(e.target.nodeName);
        e.preventDefault();//阻止默认行为;
        e.stopPropagation();//不会传播
    }

        /*下面是解决好this关键字的了,最终的*/
    function bind3(ele,type,fn){
        if(ele.addEventListener){
            ele.addEventListener(type,fn);
        }else{
            var fnTemp=function(){fn.call(ele)};//解决fn的this关键字
            if(!ele["myBind"+type]){
                ele["myBind"+type]=[];
            }
            var oBind=ele["myBind"+type];
            for (var i=0;i< oBind.length;i++){//防止重复绑定的;
                if(oBind[i].flag==fn){
                    return;
                }
            }
            oBind.push(fnTemp);
            fnTemp.flag=fn;
            ele.attachEvent("on"+type,fnTemp);
        }
    };
    function unbind3(ele,type,fn){
        if(ele.removeEventListener){
            ele.removeEventListener(type,fn);
            console.log("标准浏览器的"+type+"已经解绑!")
        }else{
            console.log("IE6/7/8的"+type+"已经解绑!")
            var oBind=ele["myBind"+type];
            if(oBind&& oBind.length){
                for(var i=0;i< oBind.length;i++){
                    /*下面是确定要解绑的fn;*/
                    if(oBind[i].flag===fn){
                        ele.detachEvent("on"+type,oBind[i]);
                        oBind.splice(i,1);
                        return;
                    }
                }
            }
        }
    };


    /*下面是解决一个元素同一类似事件的执行顺序*/
    function on(ele,type,fn){
        if(!ele["aEvent"+type]){
            ele["aEvent"+type]=[];
        }
        var aryEvent=ele["aEvent"+type];
        for(var i=0;i<aryEvent.length;i++){//防止同一个方法被同事件绑定;
            if(aryEvent[i]==fn)return;
        }
        aryEvent.push(fn);
        bind3(ele,type,run);//只会执行一次
    }

    function off(ele,type,fn){
        if(ele["aEvent"+type]){
            var aryEvent=ele["aEvent"+type];
            for(var i=0;i<aryEvent.length;i++){
                if(a[i]==fn){
//                    aryEvent.splice(i,1);//数组塌陷解决
                    a[i]=null;
                    return;
                }
            }
        }
    }


    /*事件兼容性问题,都在run上解决好*/
    function run(e){
        e=e||window.event;
        if(!e.target){
            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.stopPropagation=function(){e.cancelBubble=true;}//阻止事件传播;
            e.preventDefault=function(){e.returnValue=false;}//阻止事件默认行为;
        }
        /*上面是IE不支持的*/

        var a=this["aEvent"+e.type];
        for(var i=0;i< a.length;){
            /*下面是防止数组塌陷的*/
            if(typeof a[i]=="function"){
                //a[i].call(this);//this指向当前被绑定元素;
                a[i].call(this,e);//this后面加e;就解决了e的兼容性问题;因为想this主体传了e;具体的函数就不需要再解决e的兼容了;
                i++;
            }else{
                /*如果是空的,删掉;不删也是可以的*/
                a.splice(i,1);
            }
        }
    }

</script>

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

目前重心已经放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>