JS浏览器兼容性

1、事件绑定

兼容写法

function add(obj,event){
    if (obj.addEventListener) {
        obj.addEventListener(event,fn,fase);
    }else{
        obj.attachEvent("on"+event,fn);
    }
}

小结：addEventListener()兼容firefox、chrome、Safari、opera、IE9+

         attachEvent()兼容IE7、8

2、event事件对象

兼容写法

document.onclick = function(e){
     var e = e||window.event;  
     console.log(e.clientX);
}

小结：e兼容火狐浏览器，window.event兼容非火狐浏览器。

3、获取scrollTop

兼容写法：

var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;

小结：document.documentElement.scrollTop兼容非chrome

        document.body.scrollTop兼容chrome

4、阻止浏览器默认事件

兼容写法：

function prevent(event){
    if (event.preventDefault) {
        event.preventDefault();
    }else{
        event.returnValue = false;
    }
}

小结：eventPreventDefault()不兼容IE6-8

             event.returnValue=false兼容IE

5、阻止冒泡

兼容写法：

function stop(event){
    if (event.stopPropagation) {
        event.stopPropagation();
    }else{
        event.cancleBubble = true;
    }
}

小结：event.stopPropagation()不兼容IE6-8

            event.cancelBubble=true兼容IE

6、滚轮

兼容写法：

function mouseWheel(obj,fn){
    var ff = window.navigator.userAgent.indexOf('Firefox');
    if (ff!=-1) {  
　　　　　　obj.addEventListener('DOMMouseScroll',wheel,false);//兼容火狐
    }else{
        obj.onmousewheel = wheel;//非火狐
    }
}

小结：obj.addEventListener('DOMMouseScroll',wheel,false)兼容火狐

          obj.onmousewheel=wheel非火狐

7、获取classname

兼容写法

function byClass(parent,className){
    //通过className查找元素的兼容问题
    //如果现代浏览器有这个写法
    if (parent.getElementsByClassName) {
        return parent.getElementsByClassName(className);//返回直接查找到的元素集
    }else{
        //IE浏览器
        var arr = [];//用于存储最终查找到的元素
        var els = parent.getElementsByTagName('*');//获取查找范围下的所有元素
        var reg = new RegExp('\\b'+className+'\\b','g');
        for (var i=0;i<els.length;i++) {
            if (reg.test(els[i].className)) {//判断els.className与reg是否匹配，若匹配返回true
                arr.push(els[i]);
　　　　　　　　　　　 reg.lastIndex = 0;　　　　　　　　　　　　　　　　　
            }
        }
        return arr;//返回查找到的元素
    }
}

补充，对于为何要加上reg.lastIndex = 0;(13行下面那一句代码)，原因如下：

若不加这句代码，有连续的两个类名匹配时，只会匹配第一个，则第二个不会。究起原因就是RegExp对象的lastIndex属性：该属性存放一个整数，它声明的是上一次匹配文本之后的第一个字符的位置。若使用了‘g’全局修饰符，在执行了test方法后，lastIndex就会将匹配到的字符串的位置记录下来作为下一次匹配的起始位置。若是下一次匹配没有成功，则lastIndex置为0。

若不加'g'全局修饰符，则可以把这句代码省略掉。请点击查看demo

小结：IE浏览器不支持getElementsByClassName()所以只能自己写一个方法来获取class

后续还会补充，有错误指出还请指出。