前端面試總結（瀏覽器兼容性）

時間 2019-11-12

原文原文鏈接

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內核javascript

Firefox：gecko內核css

Safari：webkit內核html

Opera：之前是presto內核，Opera現已改用Google Chrome的Blink內核html5

Chrome：Blink(基於webkit，Google與Opera Software共同開發java

<!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>