js中的几种兼容函数

今天给大家分享几个在js中会遇到的兼容函数。

//1.兼容函数(addEventListener)
function ready(arg){
//如果浏览器支持window.addEventListener就用，否则就用别的方法
if(window.addEventListener){
window.addEventListener("DOMContentLoaded",arg,false);
}else{
//获取头部节点
var head = document.getElementsByTagName("head")[0];
//创建script标签
var myScript = document.createElement("script");
head.appendChild(myScript);
//监控script标签是否创建成功，如果创建成功就执行arg函数
myScript.onreadystatechange = function(){
if(myScript.readyState == "complete"){
//script节点创建成功，执行arg函数
arg();
}
}
}
}

//2.根据类名查找节点的函数(getElementSByClassName)
function findClass(className,obj){
//主流浏览器支持getElementsByClassName函数
if(window.getElementsByClassName){
var eles = obj.getElementsByClassName(className);
}else{
//IE浏览器不支持
var tags = document.getElementsByTagName("*");
var eles = [];
for(var i = 0;i < tags.length;i++){
//符合的字符串
var reg = new RegExp("\b" + className + "\b");
if(reg.test(tags[i].className)){
eles.push(tags[i]);
}
}
}
return eles;
}

//3. 添加事件兼容写法(attachEvent)
    function addEvent(type, element, fn) {
        if(element.attachEvent) {
            element.attachEvent("on" + type, fn);
        } else if(element.addEventListener) {
            element.addEventListener(type, fn, true);
        } else {
            element["on" + type] = fn;
        }
    }

//4.样式兼容方法(getComputedStyle)
    function getStyle(obj,styleName){
        if(window.getComputedStyle){
            //主流浏览器
            var styles = getComputedStyle(obj,null)[styleName];
        }else{
            //IE浏览器
            var styles = obj.currentStyle[styleName];
        }
        return styles;
    }
    
//5.滚轮事件兼容方法(onmousewheel)
    function mouseWheel(obj, fn){
        //判断是否是火狐浏览器
        var ff = navigator.userAgent.indexOf("Firefox");
        if (ff != -1) {
            obj.addEventListener("DOMMouseScroll", wheel, false);
        }else{
            obj.onmousewheel = wheel;
        }
        function wheel(event){
            var event = event || window.event;  
            var down = true; //判断是否向下滚动
            if (event.preventDefault){ //清除默认事件
                event.preventDefault();
            }
            if (event.detail){ //FF
                down = event.detail < 0;
            }else{
                down = event.wheelDelta > 0;
            }
            fn.apply(obj,[event, down]); //注解：fn是作为参数传进来的函数，这里通过apply方法调用fn的同时，并将当前对象和所需参数赋给fn
            // fn.call(obj,event,down);
            return false;
        }
    }