|
|
存在問題：IE中可以直接使用event對象，但是Mozilla不可以直接使用。
例如: <input type="button" value="clickMe" nclick="doIt()"><script. language="Javascript"> function doIt(){ alert(event); }</script> 這段代碼在Mozilla瀏覽器中是不能正常工作的，因為Mozilla瀏覽器中沒有默認的event對象，只能在事件發生的現場使用。
下面看一下兩者都兼容的代碼:
IE&Moz
<input type="button" value="clickMe" nclick="doIt(event)"><script. language="Javascript"> function doIt(oEvent){alert(oEvent); }</script>
2，關于event.srcElement[IE]和event.target[Moz]
Mozilla下的e.target相當于ie下的event.srcElement，但細節上有區別，后者是返回一個Html Element
而e.target返回的是個節點，也就是說包括文本節點。
看下面的例子代碼，可以看出兩者的區別和聯系:
IE ONLY
<table border="1" width="50%" nclick="doIt()"> <tr><td>1</td><td>2</td></tr> <tr><td>3</td><td>4</td></tr></table>
<script. language="Javascript">
function doIt(){ alert(event.srcElement.tagName); }
</script>
Moz
<table border="1" width="50%" nclick="doIt()"> <tr><td>1</td><td>2</td></tr> <tr><td>3</td><td>4</td></tr></table>
<script. language="Javascript">
function doIt(oEvent){
var Target = oEvent.target;
while(oTarget.nodeType != 1)
Target = oTarget.parentNode;
alert(oTarget.tagName);
}
</script>
3，鍵盤值的取得
Mozilla下的event.which與IE下的event.keyCode相當。
見代碼:
IE
<input type="text" nkeypress="doIt()"><script. language="Javascript"> function doIt(){ alert(event.keyCode); }</script>
Moz
<input type="text" nkeypress="doIt(event)"><script. language="Javascript"> function doIt(oEvent){ alert(oEvent.which) }</script>
4，event.x,event.y[IE]和event.pageX,event.pageY[Moz]
IE中取鼠標點擊的絕對位置，使用event對象的event.x和event.y
Moz中取鼠標點擊的絕對位置，使用event對象的event.pageX和event.pageY
所以為了兼容，需要自己做處理，參考代碼如下:
IE&Moz
<div id="myDiv" nclick="doIt(event)" style="position:absolute;top:100;left:100; width:100;height:100;background-color:orange;border:1px solid black"><script. language="Javascript"> function doIt(oEvent){ var posX = oEvent.x ? oEvent.x : oEvent.pageX; var posY = oEvent.y ? oEvent.y : oEvent.pageY; alert("X:" + posX + "/nY:" + posY) }</script>
5，event.offsetX,event.offsetY[IE]和event.pageX,event.pageY[Moz]
IE中取鼠標點擊的相對位置，使用event對象的event.offsetX和event.offsetY
Moz中取鼠標點擊的相對位置，使用event對象的event.layerX和event.layerY
所以為了兼容，需要自己做處理，參考代碼如下:
IE&Moz
<div id="myDiv" nclick="doIt(event)" style="position:absolute;top:100;left:100; width:100;height:100;background-color:orange;border:1px solid black"><script. language="Javascript"> function doIt(oEvent){ var posX = oEvent.offsetX ? oEvent.offsetX : oEvent.layerX; var posY = oEvent.offsetY ? oEvent.offsetY : oEvent.layerY; alert("X:" + posX + "/nY:" + posY) }</script>
6，事件綁定
事件綁定上Mozilla用addEventListener，removeEventListener
對應IE的attachEvent，detatchEvent
看下面的例子代碼:
IE ONLY
<input type="button" value="test" id="testBT"><script. language="Javascript">var Button = document.getElementById("testBT");oButton.attachEvent( "onclick", clickEvent );function clickEvent(){ alert("Hello, World!");}</script>
Moz
<input type="button" value="test" id="testBT"><script. language="Javascript">var Button = document.getElementById("testBT");oButton.addEventListener( "click", clickEvent, true );function clickEvent(){ alert("Hello, World!");}</script>
注意:藍色字的部分。IE中要在事件前加on,而在Moz中不能加。
對象選擇篇
1，通過ID訪問Html元素
一般直接使用document.getElementById就可以了，如果要兼容IE4，可以再加上document.all
IE&Moz
<input type="button" value="clickMe" id="myButton"><script. language="Javascript"> alert(document.getElementById("myButton").value);</script>
2，如果要使用document.form.item類似的訪問方法，要注意下面的問題：
IE中允許存在類似于 document.formName.item("itemName") 這樣的語句，但是Moz下是不可以的
要想在Mozilla下也可以正常運行，需要把寫法正規化，如下:
IE&Moz
<body> <form. name="myForm"> <input value="test" id="txt" /> </form> </body> <script. language="Javascript"> alert(document.myForm.elements["txt"].value); </script>
注意:在Mozilla中，訪問數組的時候，不能用類似于arr("itemName")的形式，必須使用中括號，而在IE中兩者都可以。
另外，在寫上面這段測試代碼的時候，我發現了Mozilla瀏覽器的一個有趣的問題，不知道是不是Bug。大家可以試一下下面這段代碼:
Moz
<form. name="myForm"> <input value="test" id="txt" /> </form> <script. language="Javascript"> alert(document.myForm); alert(document.forms.length); //結果為0？？？</script>
Moz
<body><form. name="myForm"><input value="test" id="txt" /></form></body><script. language="Javascript">alert(document.myForm);alert(document.forms.length); //結果為1，正常</script>
個人認為可能是因為Mozilla太符合Dom標準了吧
DOM篇
1，刪除節點
IE中有removeNode方法，可以對節點進行刪除，如下：
IE
<input type="button" value="clickMe" id="myButton">
<script. language="Javascript">
document.getElementById("myButton").removeNode();
</script>
但是Mozilla中，沒有這個方法，只能是先找到父節點，然后調用Dom方法removeChild才可以達到目的，如下：
IE&Moz
<input type="button" value="clickMe" id="myButton">
<script. language="Javascript">
var Node = document.getElementById("myButton");
oNode.parentNode.removeChild(oNode);
</script>
2，交換節點
IE中有swapNode方法可以交換兩個HTML元素節點，如下：
IE
<input type="button" value="first" id="firstButton"><input type="button" value="second" id="secondButton"><script. language="Javascript"> var First = document.getElementById("firstButton"); var Second = document.getElementById("secondButton"); oFirst.swapNode(oSecond);</script>
但是Mozilla中，沒有這個方法，可以自己寫函數實現，如下：
IE&Moz
<input type="button" value="first" id="firstButton"><input type="button" value="second" id="secondButton"><script. language="Javascript"> if(window.Node) { Node.prototype.swapNode=function(node) { var nextSibling=this.nextSibling; var parentNode=this.parentNode; node.parentNode.replaceChild(this,node); parentNode.insertBefore(node,nextSibling); } } var First = document.getElementById("firstButton"); var Second = document.getElementById("secondButton"); oFirst.swapNode(oSecond);</script>
3，關于節點的插入
IE中，有insertAdjacentHTML和insertAdjacentElement兩個好用的方法，如下：
IE
<div id="div1" style="border:1px solid black">div1<script. language="Javascript"> var Div = document.getElementById("div1"); var htmlInput = "<input>"; oDiv.insertAdjacentHTML('beforeEnd',htmlInput);</script>
但是Mozilla中是沒有這兩個方法的，為了兼容它們，統一采用Dom的insertBefore方法，如下：
IE&Moz
<div id="div1" style="border:1px solid black">div1<script. language="Javascript">
var Div = document.getElementById("div1");
var Element = document.createElement("input");
oElement.type = "text";
oDiv.insertBefore(oElement,null);
</script>
4，關于innerHTML和innerText
對于innerHTML，IE和Mozilla都是支持的，所以沒什么問題，但是對于innerText，只有IE有，Moz是沒有的
更多相關文章
IE和Firefox在JavaScript應用中的兼容性探討
IE與Firefox在JavaScript上的7個不同寫法小結
Javascript css在IE和Firefox中區別分析
JS的IE和Firefox兼容性集錦
JavaScript技術：IE和Mozilla的兼容性匯總event，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
