常用兼容代码

Posted 2020-11-11 yuebanzhou

兼容代码

为任意元素绑定多个相同的事件

<script>
    function addEventListener(element,type,fn) {
        //判断浏览器是否支持这个方法
        if(element.addEventListener) {
            element.addEventListener(type,fn,false);
        }else if(element.attachEvent) {
            element.attachEvent("on"+type,fn);
        }else {
            element["on"+type]=fn;
        }
    }
</script>

为元素注册多个事件

<script>
    function addEvent(element,type,fn) {
        //获取该元素的事件
        var oldEvent=element["on"+type];
        //获取该元素之前没有注册过的事件
        if(typeof oldEvent !="function") {
            element["on"+type]=fn;
        }else {
            //注册了
            element["on"+type]=function() {
                oldEvent();
                fn();
            };
        }
    }
</script>

为元素解绑

<script>
    function removeEventListener(element,type,fn) {
        if(element.removeEventListener) {
            element.removeEventListener(type,fn,false);
        }else if(element.detachEvent) {
            element.detachEvent("on"+type,fn);
        }else {
            element["on"+type]=null;
        }
    }
</script>

能力检测

<script>
    //设置
    function setInnerText(element,text) {
        if(typeof element.textContent=="undefined") {
            element.innerText=text;
        }else {
            element.textContent=text;
        }
    }
    //获取
    function getInnerText(element) {
        if(typeof element.textContent=="undefined") {
            return element.innerText;
        }else {
            return element.textContent;
        }
    }
</script>

获取元素

<script>
    //获取当前元素的前一个元素
    function getPreviousElement(element) {
        if(element.previousElementSibling) {
            return element.previousElementSibling;
        }else {
            var ele=element.previousSibling;
            while(ele&&ele.nodeType!==1) {
                ele=ele.previousSibling;
            }
            return ele;
        }
    }
    //获取当前元素的后一个元素
    function getNextElement(element) {
        if(element.nextElementSibling) {
            return element.nextElementSibling;
        }else {
            var ele=element.nextSibling;
            while(ele&&ele.nodeType!==1) {
                ele=ele.nextSibling;
            }
            return ele;
        }
    }
    //获取父元素的第一个元素
    function getFirstElementByParent(parent) {
        if(parent.firstElementChild) {
            return parent.firstElementChild;
        }else {
            var ele=parent.firstChild;
            while(ele&&ele.nodeType!==1) {
                ele=ele.nextSibling;
            }
            return ele;
        }
    }
    //获取父元素的最后一个元素
    function getLastElementByParent(parent) {
        if(parent.lastElementChild) {
            return parent.lastElementChild;
        }else {
            var ele=parent.lastChild;
            while(ele&&ele.nodeType!==1) {
                ele=ele.previousSibling;
            }
            return ele;
        }
    }
    //获取兄弟元素
    function getsiblings(ele) {
        if(!ele) return;
        var element=[];
        var el=ele.previousSibling;
        while(el) {
            if(el.nodeType===1) {
                element.push(el);
            }
            el=el.previousSibling;
        }
        el=ele.nextSibling;
        while(!el) {
            if(el.nodeType===1) {
                element.push(el);
            }
            el=el.nextSibling;
        }
      return elements;
    }
</script>