addEventListener，attachEvent，元素绑定（解绑）多事件兼容

addEventListener，attachEvent，元素绑定多事件兼容

• 有些时候我们需要对一个元素绑定多个事件或者一个元素多次事件绑定，通常会用addEventListener
• 书写格式：对象.addEventListener（”事件类型”,”事件处理函数”,”false”）
• 举个栗子

 document.getElementById("dv").addEventListener("click",function () {//为同一个元素添加多个事件
        console.log("谷歌火狐绑定事件");
        console.log("谷歌火狐绑定事件");
        console.log("谷歌火狐绑定事件");
        console.log("谷歌火狐绑定事件");
            },false);

• 但是这个函数不兼容ie8，因为ie8有自己的事件绑定 函数如下：

• 对象.attachEvent（有on的事件类型，事件处理函数）
  这其中有一个问题那就是这个代码虽然可以在ie8上解析，但是在ie11（edeg）不支持；是不是很无语他自己定义的东西在新版本他自己都不支持了，但是考虑到有一些用户还在用Windows xp 系统，.attachEvent还没有被抛弃；
  且.attachEvent还不能被谷歌和火狐解析，所以这家伙只能针对ie低版本浏览器
  效果如图：
  

• 好了话不多说直接上代码比较精简：

  //为任意元素.绑定任意的事件, 任意的元素,事件的类型,事件处理函数
    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;
        }
    };

解析

• 这个方法传入三个参数 1、任意元素 2、事件如（click）3、事件处理函数（function）
• if(element.addEventListener)这里判断；点这个方法的时候是没有加（）的；意思是判断浏览器是否支持这个方法
• 注意不能加（），加了括号return 是返回一个结果 就不能达到效果了；
• 把谷歌火狐的判断放在前面 因为它们的事件是 click 在后面ie的时候只需要拼接一个on 就好了，虽然也可以通过方法把on去掉，我们本来就是做兼容代码不需要带入不必要的方法；
• 当然如果是判断其他的方法可以忽略 这里的例子主要是针对点击事件；

同理推出解绑方法：

function removeEventListener(element,type,fnName) {
        if(element.removeEventListener){
            element.removeEventListener(type,fnName,false);
        }else if(element.detachEvent){
            element.detachEvent("on"+type,fnName);
        }else{
            element["on"+type]=null;
        }
    }

试一下 ：

我将用addEventListener 这个方法打开三个浏览器谷歌、火狐、ie8；

通过以上的代码成功让三个浏览器都能解析