前端面试总结（浏览器兼容性）

IE事件绑定：obj.attachEvent(eventName,funName);非IE事件绑定：obj.addEventListerner(eventName,funName,false);false为使用冒泡，true为使用捕获，ie没有捕获只有冒泡

/** 
* @description 事件绑定，兼容各浏览器 
* @param target 事件触发对象 
* @param type 事件 
* @param func 事件处理函数 
*/ 
function addEvent(target, type, func) { 
    if (target.addEventListener) //非ie 和ie9 
        target.addEventListener(type, func, false); 
    else if (target.attachEvent) //ie6到ie8 
        target.attachEvent("on" + type, func); 
    else target["on" + type] = func; //ie5 
}; 

/** 
* @description 事件移除，兼容各浏览器 
* @param target 事件触发对象 
* @param type 事件 
* @param func 事件处理函数 
*/ 
function removeEvent(target, type, func){ 
    if (target.removeEventListener) 
        target.removeEventListener(type, func, false); 
    else if (target.detachEvent) 
        target.detachEvent("on" + type, func); 
    else target["on" + type] = null; 
};

JS判断浏览器类型：

function myBrowser(){
    var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
    var isOpera = userAgent.indexOf("Opera") > -1;
    if (isOpera) {
        return "Opera"
    }; //判断是否Opera浏览器
    if (userAgent.indexOf("Firefox") > -1) {
        return "FF";
    } //判断是否Firefox浏览器
    if (userAgent.indexOf("Chrome") > -1){
  return "Chrome";
 }
    if (userAgent.indexOf("Safari") > -1) {
        return "Safari";
    } //判断是否Safari浏览器
    if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
        return "IE";
    }; //判断是否IE浏览器
}
//以下是调用上面的函数
var mb = myBrowser();
if ("IE" == mb) {
    alert("我是 IE");
}
if ("FF" == mb) {
    alert("我是 Firefox");
}
if ("Chrome" == mb) {
    alert("我是 Chrome");
}
if ("Opera" == mb) {
    alert("我是 Opera");
}
if ("Safari" == mb) {
    alert("我是 Safari");
}

浏览器内核:
IE: trident内核

Firefox：gecko内核

Safari：webkit内核

Opera：以前是presto内核，Opera现已改用Google Chrome的Blink内核

Chrome：Blink(基于webkit，Google与Opera Software共同开发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ie9以下兼容性问题</title>
</head>
<body>
    <div id="js_div" style="background-color:red;">
        <div id="js_btn">按钮</div>
    </div>
    
    <script type="text/javascript">
        (function(){
            /*主要有：1.事件绑定，1.事件冒泡，3.事件默认行为，4.事件对象，5.H5+C3，6.css hack*/


            // 1.事件绑定
            function myBrowser(){
                var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串

                if (userAgent.indexOf("Opera") > -1) {
                    return "Opera"
                }; //判断是否Opera浏览器
                if (userAgent.indexOf("Firefox") > -1) {
                    return "FF";
                } //判断是否Firefox浏览器
                if (userAgent.indexOf("Chrome") > -1){
                      return "Chrome";
                }
                if (userAgent.indexOf("Safari") > -1) {
                    return "Safari";
                } //判断是否Safari浏览器
                if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1) {
                    return "IE";
                }; //判断是否IE浏览器
            };
            function eventOne(){
                alert("IE 外");
            };
            function eventTow(){
                alert("非IE 内");
            };
            var mb = myBrowser();
            if ("IE" == mb) {
                document.getElementById("js_btn").attachEvent("onclick",eventTow);
                document.getElementById("js_div").attachEvent("onclick",eventOne);

            }else{
                
                document.getElementById("js_btn").addEventListener("click",eventTow);//默认值为false,false:在冒泡阶段进行/true:在捕获阶段执行
                document.getElementById("js_div").addEventListener("click",eventOne,true);
            }

            //2. 事件冒泡
            function btnClick(event){
                if(event && event.stopPropagation){
                    event.stopPropagation();//非ie
                }else{
                    window.event.cancelBubble=true;//ie
                }
            }
            function myfn(e){
                window.event? window.event.cancelBubble = true : e.stopPropagation();
            }

            //3.js阻止默认行为
            function myfn(e){
                window.event? window.event.returnValue = false : e.preventDefault();
            }
            function stopDefault( e ) { 
                //阻止默认浏览器动作(W3C) 
                if ( e && e.preventDefault ) 
                    e.preventDefault(); 
                //IE中阻止函数器默认动作的方式 
                else 
                    window.event.returnValue = false; 
                return false; //不仅阻止了事件往上冒泡，而且阻止了事件本身
            }

            //4. h5引用https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js  c3要添加浏览器厂商前缀http://fetchak.com/ie-css3/ie-css3.htc

            //5. 事件对象....三元写法好  坐标
            function myfn(e){ 
                var evt = e ? e:window.event;
                var src = evt.srcElement ? evt.srcElement : evt.target;
            }
            function myFn(e){
                var evt=e || window.event;
                var src = evt.srcElement || evt.target; // 获取触发事件的源对象
            }


            //页面刷新location.reload() ；返回上一页history.go(-1)；返回并刷新页面location.replace(document.referrer);document.referrer //前一个页面的URL


            //页面重定向window.location.href = "http://www.csdn.net";

        }());
    </script>
</body>
</html>