Summary event of IE and Mozilla compatibility

1. event usage
Problems:You can directly use the event object in IE, but Mozilla cannot directly use it.
For example, <input type = "button" value = "clickMe" nclick = "doIt ()"> <script. language = "javascript"> function doIt () {alert (event) ;}</script> This Code cannot work normally in the Mozilla Browser, because there is no default event object in the Mozilla browser, it can only be used in the event.
The code that is compatible with both is as follows:
IE & Moz
<Input type = "button" value = "clickMe" nclick = "doIt (Event) "> <Script. language =" javascript "> function doIt (OEvent) {Alert (oEvent) ;}</script>

2. Disable event.srcelement[ie]and event.tar get [Moz].
E.tar get under mozillais equivalent to event. srcElement under ieBut the details are different. The latter returns an Html Element.
E.tar get returns a node, that is, a text node.
The following sample code shows the differences and links between the two:
IE ONLY
<Table border = "1" width = "50%" nclick = "doIt () "> <tr> <td> 1 </td> <td> 2 </td> </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> <td> 3 </td> <td> 4 </td> </tr> </table>
<Script. language = "javascript">

Function doIt (oEvent ){

Var Target = oEvent.tar get;

While (oTarget. nodeType! = 1)

Target = oTarget. parentNode;

Alert (oTarget. tagName );

}

</Script>

3. Obtain the keyboard Value
The event. which in Mozilla is equivalent to the event. keyCode in IE.
See the Code:
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] and event. pageX, event. pageY [Moz]
IETake the absolute position of the mouse clickUse event. x and event. y of the event object
In Moz, take the absolute position of the mouse and use the event. pageX and event. pageY of the event object.
For compatibility, you need to handle it yourself. The reference code is as follows:
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] and event. pageX, event. pageY [Moz]
Use the event. offsetX and event. offsetY of the event object
In Moz, take the relative position of the mouse and use event. layerX and event. layerY of the event object.
For compatibility, you need to handle it yourself. The reference code is as follows:
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. Event binding
Mozilla uses addEventListener and removeEventListener to bind the event.
Corresponds to the attachEvent and detatchEvent of IE
See the following example code:
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>

Note: the blue part. In IE, add on before the event, but not in Moz.
Object Selection
1. access Html elements by ID
You can use document. getElementById directly. To be compatible with IE4, add document. all.
IE & Moz
<Input type = "button" value = "clickMe" id = "myButton"> <script. language = "javascript"> alert (document. getElementById ("myButton "). value); </script>

2. If you want to use access methods similar to document. form. item, pay attention to the following issues:
In IE, statements similar to document. formName. item ("itemName") are allowed, but not in Moz.
To run normally under Mozilla, You need to normalize the statement as follows:
IE & Moz
<Body> <form. name = "myForm"> <input value = "test" id = "txt"/> </form> </body> <script. language = "javascript"> alert (document. myForm. elements ["txt"]. value); </script>

Note: in Mozilla, arrays cannot be accessed in the form of arr ("itemName"). Brackets must be used, but both can be used in IE.
In addition, when I wrote the above test code, I found an interesting question about the Mozilla Browser. I don't know if it is a Bug. You can try the following code:
Moz
<Form. name = "myForm"> <input value = "test" id = "txt"/> </form> <script. language = "javascript"> alert (document. myForm); alert (document. forms. length); // The result is 0 ??? </Script>

Moz
<Body> <form. name = "myForm"> <input value = "test" id = "txt"/> </form> </body> <script. language = "javascript"> alert (document. myForm); alert (document. forms. length); // The result is 1, normal </script>

I personally think it may be because Mozilla is too compliant with Dom standards.
DOM
1. delete a node
The removeNode method in IE can be used to delete nodes., As follows:
IE
<Input type = "button" value = "clickMe" id = "myButton">

<Script. language = "javascript">

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

</Script>

However, Mozilla does not have this method. You can only find the parent node first and then call the Dom method removeChild.Can achieve the goal, as follows:
IE & Moz
<Input type = "button" value = "clickMe" id = "myButton">

<Script. language = "javascript">

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

ONode. parentNode. removeChild (oNode );

</Script>

2. Exchange Node
The swapNode method in IE can exchange two HTML element nodes, as shown below:
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>

However, Mozilla does not have this method. You can write the function implementation by yourself, as shown below:
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. Insert a node
In IE, there are two useful methods: insertAdjacentHTML and 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>

However, Mozilla does not use these two methods. To be compatible with them, the Dom insertBefore method is adopted as follows:
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. About innerHTML and innerText
For innerHTML, IE and Mozilla are supported, so there is no problem, but for innerText, only IE does, Moz does not
More Articles
Compatibility between IE and Firefox in JavaScript applications
Seven different methods of writing IE and Firefox in JavaScript
Difference between javascript css in IE and Firefox
Highlights of js ie and Firefox compatibility