前端兼容代码集合

由于不同的浏览器，或者同一个浏览器有不同的的版本问题，相同的代码在不同的浏览器运行会产生不同的效果甚至是错误。所以需要一些兼容代码来保证程序正常运行。
兼容代码1：为同一个元素注册多个事件
用传统的 对象.事件 的方式来注册多个点击事件时，后一个事件会被前一个事件覆盖。

function f1(){
            console.log("绑定了第一个");
        }
        function f2(){
            console.log("绑定了第二个");
        }
        //绑定的兼容代码
        function addEventListener(element,type,fName){
            if(element.addEventListener){
                element.addEventListener(type,fName,false);
            }else if(element.attachEvent){
                element.attachEvent(type,fName);
            }else{
                element["on"+type] = fName;
            }
        }
        addEventListener(document.getElementById("btn"),"click",f1);
        addEventListener(document.getElementById("btn"),"click",f2);

两个函数的区别：函数名字和参数的个数就不写了
① addEventListener在谷歌、火狐、IE11支持，attachEvent在IE8支持，在谷歌、火狐、IE11不支持。
② addEventListener中的this是调用他的对象，attachEvent中的this是window对象（页面中的顶级对象）
兼容代码2：为同一个元素注册解绑事件

function removeEventListener(element,type,fName){
           if(element.removeEventListener){
               element.removeEventListener(type,fName,false);
           }else if(element.detachListener){
               element.detachLsitener(type,fName);
           }else{
               element["on"+type] = null;
           }
       }
       //解绑第一个
       document.getElementById("btn1").onclick = function(){
           removeEventListener(document.getElementById("btn"),"click",f1);
       }