华东15选5不开奖

IE和Mozilla的兼容性匯總event

IE和Mozilla的兼容性匯總event,IE和Mozilla的兼容性匯總event,需要的朋友可以參考下。
關鍵字:event
1,關于event的用法
存在問題: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兼容性集錦

华东15选5不开奖
2016中超积分榜 上海快三走势图和值 p3试机号排列三试机号查询 足彩胜负彩 快乐10分任三投注 南通棋牌中心大厅 网络赌场 北京快三形态走势图 天天棋牌二维码 奥迅球探网足球指数