瀏覽器兼容（JS部分）

總結了一下JS中的瀏覽器兼容問題及其處理方式

添加事件/移除事件方法

分別檢驗是不是DOM2級，IE、DOM0級。
DOM0級：將一個函數賦給一個事件處理程序屬性。具備簡單、跨瀏覽器的優點。添加的事件處理程序會在冒泡階段執行。事件處理程序也是在它所依附的元素做用於中執行。
刪除事件處理程序：將事件處理程序的屬性的值設爲null。
DOM2級：DOM2級事件處理方法：addEventListener()和removeEventListener()，這兩種方法 接受三個參數，要處理的事件名，做爲事件處理程序的函數和一個布爾值，布爾值爲true時，表示在捕獲階段調用事件處理函數；布爾值爲false，表示在冒泡階段調用事件處理函數。
調用addEventListener()添加的事件處理程序只能經過removeEventListener()移除，移除時傳入的參數和添加處理程序時使用的參數必須一致。因此經過addEventListener()添加的匿名函數沒法移除。與DOM0級相同，事件處理程序也是在它所依附的元素做用於中執行。
大多數狀況下將事件處理程序添加到事件流的冒泡階段，能夠最大限度的兼容各類瀏覽器。
IE事件處理程序：兩個方法：attachEvent()和detachEvent()。接收兩個參數：要處理的事件名，做爲事件處理程序的函數。與上述兩種狀況的主要區別是做用域不一樣：attachEvent()和detachEvent()會在全局做用域中執行。
除了做用域的區別外，DOM2級和IE事件處理程序能夠添加多個事件處理程序，而OM0級只能添加一個。

獲取事件及事件對象目標

event：事件處理對象，包含與建立它的特定事件有關的屬性和方法。其中target（事件的目標）是其中一個成員。
在兼容DOM的瀏覽器中，event對象只是簡單的傳入和返回。而IE中，event參數是爲定義的，所以就會返回window.event。
返回事件的目標，IE中爲event.srcElemnt。

阻止瀏覽器默認事件及阻止冒泡的兼容性寫法

阻止瀏覽器默認事件：IE中爲：event.returnValue=false
阻止事件冒泡：IE中爲cancelBubble=true，由於IE中只有事件冒泡，因此只能取消事件冒泡。
stopPropagatation()既能阻止事件冒泡也能阻止事件捕獲。

獲取mouseover和mouseout事件相關元素信息

DOM 經過event對象的relatedTarget屬性提供了相關元素的信息。這個屬性只對mouseover和mouseout事件才包含值，對於其餘事件，這個屬性值爲null。在mouseover事件觸發時，IE的fromElement屬性保存了相關元素，在mouseout事件觸發時，IE的toElement屬性保存了相關元素。

鼠標滾輪判斷

可以獲取鼠標滾輪增量的方法

該事件兼容性問題存在於：opera、Firefox和其餘瀏覽器之間。

跨瀏覽器得到字符編碼

IE9，Firefox，Chrome，Safari的event對象都支持charcode屬性，在發生keypress事件時才包含值。值爲按下那個鍵所對應的ASCII編碼。IE8及以前版本和Opera則使用keyCode。

訪問、設置剪切板中的數據

要訪問剪切板中的數據，可使用clipboardData對象：IE中，這個對象是window對象的屬性；而在Firefox，Chrome，Safar中，這個對象是event對象的屬性。

setAttribute('style','color:red;')

FIREFOX支持(除了IE，如今全部瀏覽器都支持)，IE不支持

解決辦法：不用setAttribute('style','color:red')

而用object.style.cssText = ‘color:red;'(這寫法也有例外)

最好的辦法是上面種方法都用上，萬無一失。

類名設置

class屬性在W3C DOM中扮演着很重要的角色，但因爲瀏覽器差別性仍然存在。使用setAttribute("class", vName)語句動態設置Element的class屬性在firefox中是行的通的，在IE中卻不行。由於使用IE內核的瀏覽器不認識"class"，要改用"className"；
一樣，firefox 也不認識"className"。因此經常使用的方法是兩者兼備：

element.setAttribute("class", vName);
element.setAttribute("className", vName); //for IE
IE和FF都支持object.className。

用setAttribute設置事件

var obj = document.getElementById('objId');
obj.setAttribute('onclick','funcitonname()');
該方法FIREFOX支持，IE不支持。

IE中必須用點記法來引用所需的事件處理程序,而且要用賦予匿名函數
以下：
var obj = document.getElementById('objId');
obj.onclick=function(){fucntionname();};
這種方法全部瀏覽器都支持。

創建單選鈕

IE之外的其餘瀏覽器
var rdo = document.createElement('input');
rdo.setAttribute('type','radio');
rdo.setAttribute('name','radiobtn');
rdo.setAttribute('value','checked');
IE瀏覽器
var rdo =document.createElement(」<input name=」radiobtn」 type=」radio」 value=」checked」 />」);

innerText的問題

問題說明：innerText在IE中能正常工做，可是innerText在FireFox中卻不行。
解決方法：在非IE瀏覽器中使用textContent代替innerText。
示例：

if(navigator.appName.indexOf("Explorer") >-1){ 
document.getElementById('element').innerText = "my text"; 
} else{ 
document.getElementById('element').textContent = "my text"; 
}

[注] innerHTML 同時被ie、firefox等瀏覽器支持，其餘的，如outerHTML等只被ie支持，最好不用。

Table操做問題

ie、firefox以及其它瀏覽器對於 table 標籤的操做都各不相同，在ie中不容許對table和tr的innerHTML賦值，使用js增長一個tr時，使用appendChild方法也無論用，document.appendChild在往表裏插入行時FIREFOX支持，IE不支持。

訪問的父元素的區別

問題說明：在IE下，使用 obj.parentElement 或 obj.parentNode 訪問obj的父結點；在firefox下，使用 obj.parentNode 訪問obj的父結點。
解決方法：由於firefox與IE都支持DOM，所以統一使用obj.parentNode 來訪問obj的父結點。

event.x與event.y問題

問題說明：IE下，even對象有x、y屬性，可是沒有pageX、pageY屬性；Firefox下，even對象有pageX、pageY屬性，可是沒有x、y屬性。
解決方法：var myX = event.x ? event.x : event.pageX; var myY = event.y ? event.y:event.pageY;

document.formName.item(」itemName」) 問題

問題說明：IE下，可使用 document.formName.item(」itemName」) 或 document.formName.elements ["elementName"]；Firefox 下，只能使用document.formName.elements["elementName"]。
解決方法：統一使用document.formName.elements["elementName"]。

自定義屬性問題

問題說明：IE下，可使用獲取常規屬性的方法來獲取自定義屬性，也可使用 getAttribute() 獲取自定義屬性；Firefox下，只能使用 getAttribute() 獲取自定義屬性。
解決方法：統一經過 getAttribute() 獲取自定義屬性。

集合類對象問題

問題說明：IE下，可使用 () 或 [] 獲取集合類對象；Firefox下，只能使用 [ ]獲取集合類對象。
解決方法：統一使用 [] 獲取集合類對象。

eval(」idName」)問題

問題說明：IE下，可使用 eval(」idName」) 或 getElementById(」idName」) 來取得 id 爲 idName 的HTML對象；Firefox下，只能使用 getElementById(」idName」) 來取得 id 爲 idName 的HTML對象。
解決方法：統一用 getElementById(」idName」) 來取得 id 爲 idName 的HTML對象。

const問題

問題說明：Firefox下，可使用const關鍵字或var關鍵字來定義常量；IE下，只能使用var關鍵字來定義常量(IE11解決了)。
解決方法：統一使用var關鍵字來定義常量。

input.type屬性問題

問題說明：IE下 input.type 屬性爲只讀；可是Firefox下 input.type 屬性爲讀寫。
解決辦法：不修改 input.type 屬性。若是必需要修改，能夠先隱藏原來的input，而後在一樣的位置再插入一個新的input元素。

事件委託方法

問題說明：IE下，使用 document.body.onload = inject; 其中function inject()在這以前已被實現；在Firefox下，使用 document.body.onload = inject();
解決方法：統一使用 document.body.onload=new Function('inject()'); 或者 document.body.onload = function()

對象寬高賦值問題

問題說明：FireFox中相似 obj.style.height = imgObj.height 的語句無效。解決方法：統一使用 obj.style.height = imgObj.height + ‘px';