CSS浏览器兼容性写法、JS浏览器兼容性写法

一、浏览器的内核

IE：trident内核

Firefox（火狐）：gecko内核

Chrome：Blink（基于Webkit）

Safari：Webkit内核

Oprea：现用Blink，以前是presto内核

二、CSS浏览器兼容性

-moz-   火狐

-o-        opera早期

-webkit-     谷歌、safari

-ms-    IE

三、JS浏览器兼容的写法

（参考博客：https://www.cnblogs.com/May-J-Wang/p/6995288.html）

浏览器兼容问题有很多，包括个浏览器元素查找问题、DOM操作以及事件。下面列举几种常见JS事件的兼容性写法。

1、js阻止默认事件

var e = event ? || window.event;  简写形式： var e=e || window.event;

//如果存在event,那么var e=event;如果不存在event，那么var e=window.event,为了实现多种浏览器兼容

//js阻止默认事件
document.onclick = function(e){
    var e = event ? || window.event;
    if(e.preventDefault){
        e.preventDefault();  //W3C标准
    } else {
        e.returnValue = fasle; //IE
    } 
}

2、阻止事件冒泡事件

//阻止冒泡事件
document.onclik = function(e){
    var e = e || window.event;
    if(e.stopPropagation){
        e.stopPropagation(); //W3C
    } else {
        e.cancelBlue = true;
    }
}

3、获取事件及事件对象目标

getEvent:function(e){
    return e || window.event;
};
getTarget:function(e){
    return e.target || event.srcElement;
};

 4、添加事件方法

//在标准浏览器中绑定事件
addHandler：function(element,type,handler){
    if(element.addEventListener){        //检测是否为DOM2级方法
        element.addEventListener(type, handler, false);
    }else if (element.attachEvent){      //检测是否为IE级方法
        element.attachEvent("on" + type, handler);
    } else {                            //检测是否为DOM0级方法
        element["on" + type] = handler;
    };
};

//解除事件绑定
removeHandler: function (element, type, handler) {
    if (element.removeEventListener()) {
       element.removeEventListener(type, handler, false);
    } else if (element.detachEvent) {
       element.detachEvent("on" + type, handler);
    } else {
       element["on" + type] = null;
    }
}