在开发的过程中，我们就经常会遇到浏览器的兼容问题，因为我们不知道用户是用什么版本的浏览器，对于不同的浏览器，对一些不同的样式或者事件，不同的浏览器支持度页不一样，那么我们今天来总结一部分常见的浏览器兼容事件吧。

一、事件绑定中的addEventListener()方法

1、浏览器支持：

支持该方法的第一个浏览器的版本号

支持的浏览器.png

Internet Explorer 8 及更早IE版本不支持 addEventListener() 方法，，Opera 7.0 及 Opera 更早版本也不支持,但是，对于这些不支持该函数的浏览器，你可以使用 attachEvent() 方法来添加事件

2、语法

element.addEventListener(event, function, useCapture)

参数说明：
event ：必须，字符串，指定事件名，不要使用“on”前缀
function：必须，事件触发时执行的函数
useCapture: 可选，布尔值，指定事件是否在捕获或者冒泡阶段执行；true：在捕获阶段执行；false：默认，在冒泡阶段执行

3、兼容性写法

我们通过判断浏览器是否支持addEventListener函数或者attachEvent函数来执行对应的语句

//参数说明：
//element：需要操作的对象
//type：需要绑定的事件名
//fn：事件触发时执行的函数
function addEvent(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;
    }
}

二、解除事件绑定的removeEventListener()方法

1、浏览器支持

支持该方法的第一个浏览器的版本号

支持的浏览器.png

Internet Explorer 8 及更早IE版本不支持 removeEventListener() 方法，Opera 7.0 及 Opera 更早版本也不支持。 但是，对于这些不支持该函数的浏览器，你可以使用 detachEvent() 方法来移除由 attachEvent() 方法添加的事件。

2、语法

element.removeEventListener(event, function, useCapture)

参数说明：
event：必须，要移除的事件名称，不要加“on”前缀
function：必须，指定要移除的函数
useCapture：可选，布尔值。指定移除事件是否在捕获或者冒泡阶段执行；true：在捕获阶段执行；false：默认，在冒泡阶段执行。

3、兼容性写法

我们通过判断浏览器是否支持removeEventListener函数或者detachEvent函数来执行对应的语句

//参数说明：
//element：需要操作的对象
//type：需要解除绑定的事件名
//fn：事件触发时移除的函数
function removeEvent(element,type,fn){
    if(element.removeEventListener){
          console.log(element.removeEventListener, element, type, fn)
          element.removeEventListener(type,fn,false);
    }else if(element.detachEvent){
        element.detachEvent("on"+type,fn);
    }else{
        element["on"+type]=null;
    }
}

三、滚轮事件addMousewhel()

1、浏览器支持

这里不是区分IE8派和其他派，而是区分Firefox派和其他派，Firefox浏览器一个人使用DOMMouseScroll，其他包括IE6在内的浏览器使用onmousewheel
　　那么我们想想想滚动滚轮的时候，还有什么是我们遇到问题呢？
（1）、鼠标滚轮是向上滚动还是向下滚动呢？
（2）、鼠标滚轮滚动的幅度大小是多少呢？
还好，我们可以通过event的某些属性值得到这些信息
（1）“mousewheel”事件中的“event.wheelDelta”属性值，如果返回值是正值说明滚轮是向上滚动，如果是负值说明滚轮是向下滚动，返回的值是120的倍数，即幅度大小 = 返回值/120 ;
（2）“DOMMouseScroll”事件中“event.datail”属性值：如果返回值是正值说明滚轮是向下滚动，如果是负值说明是向上滚动（与 “event.wheelDelta” 正好相反），幅度大小 = 返回值；

2、兼容性写法

我们只需要根据navigator.userAgent.indexOf("Firefox")判断浏览器类型是否是Firefox，是就用DOMMouseScroll,不是就用mousewheel语句

//参数说明：
element: 是绑定滚轮事件的元素
fn：是滚轮事件触发执行的函数
function addMousewheel(element,fn){
    if(navigator.userAgent.indexOf("Firefox")!=-1){
        element.addEventListener("DOMMouseScroll",fn,false);
    }else{
        element.onmousewheel = fn;
    }
}

以上是对滚轮事件的兼容性封装函数，那么我们在调用这个函数的时候，还需要在在参数fn的函数里面来统一滚轮的方向和幅度，即：

addMousewheel(div,function(ev){
    var detail = -ev.detail || ev.wheelDelta/120;
})

这样统一后，我们不管在哪个浏览器触发滚轮事件，其滚轮方向和滚动幅度都是一致的

四、获取样式兼容函数getComputedStyle()

1、浏览器支持

除了IE6-8浏览器不支持getComputedStyle()方法，其他主流浏览器都支持这个方法，IE浏览器有自己的一套获取样式的属性currentStyle()。

2、getComputedStyle与style、currentStyle的区别

（1）首先我们来了解一下element.style属性（可读可写）

element.style属性返回一个CSSStyleDeclaration对象，表示元素的内联style属性，既然它返回的是一个对象，那我们就不能通过直接给styles属性设置字符串（如：element.style = "color：blue"）来设置style,因为它返回的对象时只读的，但style本身还有属性可以用来设置样式（比如：ele.style.color = "blue"）
　　那我们要了解元素样式的信息，仅仅使用style属性是不够的，这是因为它只包含了在元素内联style属性上声明的CSS属性，而不包括来自其他地方声明的样式，那么这时候我们需要使用window.getComputedStyle()来获取属性

（2）window.getComputedStyle()（仅可读）

getComputedStyle方法获取的是应用在元素上的所有的CSS属性（包括所有的默认样式），但是这种方法是IE6-8不支持的

（3）currentStyle

currentStyle是IE浏览器自娱自乐的一个属性，element.currrentStyle返回的是元素当前应用的最终CSS属性值（包括外联CSS文件,页面中嵌入的<style>属性等）。

那我们在不知道用户用什么浏览的情况下，我们该怎么准确无误的获取元素的CSS样式呢？下面我们来封装一个获取样式兼容函数

3、兼容性写法

我们只需判断浏览器是否支持getComputedStyle()方法，就能判断用户使用是否是IE6—8浏览器

function getStyle(obj,styleName){
    if(window.getComputedStyle){
        var styles = getComputedStyle(obj,null)[styleName];
    }else{
        var styles = obj.currentStyle[styleName];
    }
    return styles;
}