IE和firefox瀏覽器的event事件兼容性匯總

更新時(shí)間：2009年12月06日 21:41:19 作者：

IE和firefox的event事件兼容分析。

1，關(guān)于event的用法
存在問題：IE中可以直接使用event對象，但是Mozilla不可以直接使用。
例如: <input type="button" value="clickMe" nclick="doIt()">

function doIt(){

alert(event);

}

</script> 這段代碼在Mozilla瀏覽器中是不能正常工作的，因?yàn)镸ozilla瀏覽器中沒有默認(rèn)的event對象，只能在事件發(fā)生的現(xiàn)場使用。
下面看一下兩者都兼容的代碼:
IE&Moz
<input type="button" value="clickMe" nclick="doIt(event)">

function doIt(oEvent){

alert(oEvent);

}

</script>

2，關(guān)于event.srcElement[IE]和event.target[Moz]
Mozilla下的e.target相當(dāng)于ie下的event.srcElement，但細(xì)節(jié)上有區(qū)別，后者是返回一個(gè)Html Element
而e.target返回的是個(gè)節(jié)點(diǎn)，也就是說包括文本節(jié)點(diǎn)。
看下面的例子代碼，可以看出兩者的區(qū)別和聯(lián)系:
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相當(dāng)。
見代碼:
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中取鼠標(biāo)點(diǎn)擊的絕對位置，使用event對象的event.x和event.y
Moz中取鼠標(biāo)點(diǎn)擊的絕對位置，使用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中取鼠標(biāo)點(diǎn)擊的相對位置，使用event對象的event.offsetX和event.offsetY
Moz中取鼠標(biāo)點(diǎn)擊的相對位置，使用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
對應(yīng)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>

注意:藍(lán)色字的部分。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下也可以正常運(yùn)行，需要把寫法正規(guī)化，如下:
IE&Moz
<body> <form. name="myForm"> <input value="test" id="txt" /> </form> </body> <script. language="javascript"> alert(document.myForm.elements["txt"].value); </script>

注意:在Mozilla中，訪問數(shù)組的時(shí)候，不能用類似于arr("itemName")的形式，必須使用中括號(hào)，而在IE中兩者都可以。
另外，在寫上面這段測試代碼的時(shí)候，我發(fā)現(xiàn)了Mozilla瀏覽器的一個(gè)有趣的問題，不知道是不是Bug。大家可以試一下下面這段代碼:
Moz
<form. name="myForm"> <input value="test" id="txt" /> </form> <script. language="javascript"> alert(document.myForm); alert(document.forms.length); //結(jié)果為0？？？</script>

Moz
<body><form. name="myForm"><input value="test" id="txt" /></form></body><script. language="javascript">alert(document.myForm);alert(document.forms.length); //結(jié)果為1，正常</script>

個(gè)人認(rèn)為可能是因?yàn)镸ozilla太符合Dom標(biāo)準(zhǔn)了吧
DOM篇
1，刪除節(jié)點(diǎn)
IE中有removeNode方法，可以對節(jié)點(diǎn)進(jìn)行刪除，如下：
IE
<input type="button" value="clickMe" id="myButton">

document.getElementById("myButton").removeNode();

</script>

但是Mozilla中，沒有這個(gè)方法，只能是先找到父節(jié)點(diǎn)，然后調(diào)用Dom方法removeChild才可以達(dá)到目的，如下：
IE&Moz
<input type="button" value="clickMe" id="myButton">

var Node = document.getElementById("myButton");

oNode.parentNode.removeChild(oNode);

</script>

2，交換節(jié)點(diǎn)
IE中有swapNode方法可以交換兩個(gè)HTML元素節(jié)點(diǎn)，如下：
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中，沒有這個(gè)方法，可以自己寫函數(shù)實(shí)現(xiàn)，如下：
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，關(guān)于節(jié)點(diǎn)的插入
IE中，有insertAdjacentHTML和insertAdjacentElement兩個(gè)好用的方法，如下：
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中是沒有這兩個(gè)方法的，為了兼容它們，統(tǒng)一采用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，關(guān)于innerHTML和innerText
對于innerHTML，IE和Mozilla都是支持的，所以沒什么問題，但是對于innerText，只有IE有，Moz是沒有的
更多相關(guān)文章
IE和Firefox在JavaScript應(yīng)用中的兼容性探討
 IE與Firefox在JavaScript上的7個(gè)不同寫法小結(jié)
javascript css在IE和Firefox中區(qū)別分析
 JS的IE和Firefox兼容性集錦

您可能感興趣的文章: