javascript方法封装集合

一、兼容性实现getElementsByClassName

function getElesByClassName(className, parentId) {
    //先通过能力检测，看是否支持
    if(!document.getElementsByClassName) {
        document.getElementsByClassName = function(className, parentId) {
            var parent = parentId ? document.getElementById(parentId) : document;
            var ret = [];
            var eles = parent.getElementsByTagName('*');
            for(i=0; i<eles.length; i++) {
                if(eles[i].className == className
                   || eles[i].className.indexOf(className + ' ')>=0
                   || eles[i].className.indexOf(' ' + className + ' ')>=0
                   || eles[i].className.indexOf(' ' + className)>=0) {
                       ret.push(eles[i])
                   }
            }
            return ret
        }
    }
    return document.getElementsByClassName(className);
}

二、兼容实现DOMContentLoaded事件

function myReady(fn) {
    //对于现代浏览器，对DOMContentLoaded事件的处理，采用标准的事件绑定方式
    if(document.addEventListener) {
        document.addEventListener("DOMContentLoaded", fn, false);
    } else {
        IEContentLoaded(fn);
    }

    //IE下模拟DOMContentLoaded
    function IEContentLoaded(fn) {
        var docu = window.document;
        var done = false;

        //只执行一次用户回调函数的init
        var init = function() {
            if(!done) {
                done = true;
                fn();
            }
        };

        //IE下的监测函数
        (function() {
            try {
                //DOM树未创建完之前调用doScroll会抛出错误
                docu.documentElement.doScroll("left")
            } catch(e) {
                setTimeout(arguments.callee, 50);
                return;
            }
            init();
        })();

        //监听document的加载状态
        docu.onreadystatechange = function() {
            //如果用户是在domReady之后绑定的函数，就立马执行。
            if(docu.readyState == 'complete') {
                docu.onreadystatechange = null;
                init();
            }
        }
    }
}

三、对javascript事件的封装

/**
 * Created by 赵亚峰 on 2018/8/22.
 */
var eventUtil = {
    //添加事件
    addHandle: function(ele, type, handle) {
        if(ele.addEventListener) {
            ele.addEventListener(type, handle, false);
        } else if(ele.attachEvent) {
            ele.attachEvent('on'+type, handle);
        } else {
            ele['on'+type] = handle;
        }
    },

    //删除事件
    removeHandle: function(ele, type, handle) {
        if(ele.removeEventListener) {
            ele.removeEventListener(type, handle, false);
        } else if(ele.detachEvent) {
            ele.detachEvent('on'+type, handle);
        } else {
            ele['on'+type] = null;
        }
    },

    //获取事件对象event;
    getEvent: function(event) {
        return event ? event : window.event;
    },

    //获取事件类型
    getType: function(event) {
        return event.type;
    },

    //获取事件源
    getElement: function(event) {
        return event.target || event.srcElement;
    },

    //阻止浏览器的默认行为
    preventDefault: function(event) {
        if(event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    },

    //阻止事件冒泡
    stopPropagation: function(event) {
        if(event.stopPropagation) {
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    }
};