美文网首页
JS 兼容整理

JS 兼容整理

作者: 小碳儿 | 来源:发表于2020-06-24 13:49 被阅读0次

    获取非行内样式的兼容方式

    function getStyle(obj,attr){//获取非行间样式,obj是对象,attr是值if(obj.currentStyle){//针对ie获取非行间样式return obj.currentStyle[attr];

          }else{

              returngetComputedStyle(obj,false)[attr];//针对非ie        }

        }

    获取事件对象的兼容方式

    document.onclick=function(eve){

            vare=eve||window.event;

            console.log(e);

        }

    事件冒泡的兼容方法

    function stopBubble(e){

            if(e.stopPropagation){

                e.stopPropagation();

            }else{

                e.cancelBubble =true;//兼容ie        }

        }

    阻止浏览器默认行为的兼容方法

    if( e.preventDefault ){

            e.preventDefault();

        }else{

            window.event.returnValue =false;//ie}

    监听事件的设置和移除的兼容方式

    1.封装成对象的方式

        varEventUtil={

            addHandler:function(DOM,EventType,fn){

                if(DOM.addEventListener){

                    DOM.addEventListener(EventType,fn,false);

                }elseif(DOM.attachEvent){

                    DOM.attachEvent('on'+EventType,fn)

                }else{

                    DOM['on'+EventType]=fn

                }

            },

            removeHandler:function(DOM,EventType,fn){

                if(DOM.removeEventListener){

                    DOM.removeEventListener(EventType,fn,false)

                }elseif(DOM.detachEvent){

                    DOM.detachEvent('on'+EventType,fn)

                }else{

                    DOM['on'+EventType]=null;

                }

            }

        }2.封装成两个函数的方式

        function addEvent(obj,inci,back){

            if(obj.addEventListener){

                obj.addEventListener(inci,back);

            }elseif(obj.attachEvent){

                obj.attachEvent("on"+ inci,back);

            }else{

                obj["on"+inci] = back;

            }

        }

        function removeEvent(obj,inci,back){

            if(obj.removeEventListener){

                obj.removeEventListener(inci,back,false);

            }elseif(obj.detachEvent){

                obj.detachEvent("on"+ inci,back);

            }else{

                obj["on"+inci] =null;

            }

        }

    事件委托的兼容方法

    varoul = document.querySelector("ul")

        oul.onclick = function(eve){

            vare = eve || window.event;

            vart = e.target || e.srcElement;

            if(t.getAttribute("abc") =="l"){

                console.log(e.target.innerHTML)

            }

        }

    键盘事件的兼容方法

    vareve = eve||window.event;varkeyC = eve.keyCode||eve.which;

    相关文章

      网友评论

          本文标题:JS 兼容整理

          本文链接:https://www.haomeiwen.com/subject/teerfktx.html