JS兼容性問題彙總（主要針對IE）

今天來總結一下JS的兼容問題和相關的解決方法。這裏老規矩，吐槽一下萬惡之源IE！！

1、事件綁定的兼容問題。這裏先回顧一下事件綁定的方式，有DOM0級和DOM2級，DOM0級沒有兼容性問題，但是缺點也很多，比如不可以在多次綁定同一個事件，後綁定的時間會將先綁定的事件覆蓋！！DOM2級綁定方式支持大多數高級瀏覽器。但是IE8及以下瀏覽器不支持DOM2級綁定方式，它有自己的綁定方法：attachEvent。這時綁定事件就需要考慮瀏覽器的兼容性問題了，下邊貼出完美解決兼容性問題的代碼：

//三個形參分別表示綁定事件的元素，事件類型和事件函數
 function bindEvent(dom, type, handler) {
            if (dom.addEventListener) {
                console.log("高級瀏覽器執行該代碼")
                dom.addEventListener(type, handler, false);
            } else if (dom.attachEvent) {
                console.log("高級IE瀏覽器執行該代碼")
                dom.attachEvent("on" + type, handler);
            } else {
                console.log("其它瀏覽器使用DOM0級綁定方式。")
                var t = "on" + type;
                dom[t] = handler;
            }        bindEvent(box, "mousedown", function() {
           
        });  }

2、事件本身的兼容性問題。我們在需要使用鼠標座標等信息時，需要用到event，在高級瀏覽器中會主動傳遞該參數，但是在IE8及以下瀏覽器中，將event放在了window.event屬性下，此時用短路語法即可輕鬆解決。以下爲代碼

            var event = event || window.event;
             event 是瀏覽器收集到的觸發事件時的信息組成的對象 

順帶一提，IE中沒有e.pagaX和e.pageY這兩個屬性。
3、獲取頁面滾動值scrollTop的兼容問題。一些瀏覽器將scrollTop綁定在body上，還有一些綁定在HTML上，解決辦法：

var scrollTop = document.body.scrollTop || document.documentElement.scroll

4、獲取CSS樣式的兼容性問題。高級瀏覽器的方法爲getComputedStyle，IE中爲currentStyle。解決方法：

//第一個形參爲要獲取樣式的元素，第二個爲要獲取元素的樣式
        function getCss(ele, cssName) {
           //能力檢測 檢測是否具備getComputedStyle方法
            if (window.getComputedStyle) {
                //如果有 就調用並得到ele這個元素的css樣式對象（屬性）
                var cssObj = getComputedStyle(ele);
                //返回對應的屬性
                return cssObj[cssName];
            } else {
                //如果沒有 通過currentStyle屬性獲取css樣式對象
                var cssObj = ele.currentStyle;
                 //返回對應的屬性
                return cssObj[cssName];
            }

5、目標精確元素的兼容性問題，在高級瀏覽器中觸發事件的元素爲e.target,在IE中爲e.srcElement。也是使用短路語法就可以啦！

6、停止事件冒泡的兼容性問題。在高級瀏覽器中爲e.stopPropagation()。在IE中爲 e.cancelBubble = true;

暫時想到的就這麼多啦！有錯誤的地方還請各位大俠指出！！