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> Code It cannot work normally in the Mozilla browser, because there is no default event object in the Mozilla Browser and 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]
in IE, take the absolute position of the mouse click , use the event of the event object. X and event. Y
In Moz, take the absolute position of the mouse and use the event of the event object. pagex and event. pagey
for compatibility, you need to handle it by yourself. The reference code is as follows:
ie & Moz

function doit (oevent) {var posx = oevent. X? Oevent. X: oevent. pagex; var posy = oevent. Y? Oevent. Y: oevent. Pagey; alert ("X:" + posx + "\ NY:" + posy)}

5, event. offsetx, event. offsety [ie] and event. pagex, event. pagey [Moz ]
in IE, take the relative position of the mouse click and use the event of the event object. offsetx and event. offsety
In Moz, take the relative position of the mouse and use the event of the event object. layerx and event. layery
for compatibility, you need to handle it by yourself. The reference code is as follows:
ie & Moz

function doit (oevent) {var posx = oevent. offsetx? Oevent. offsetx: oevent. layerx; var posy = oevent. offsety? Oevent. offsety: oevent. layery; alert ("X:" + posx + "\ NY:" + posy)}

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. For innerhtml and innertext
innerhtml, ie and Mozilla are supported, so there is no problem, but for innertext, only IE has, moz does not exist
more articles
discussion on compatibility between IE and Firefox in Javascript applications
IE and seven different writing methods of Firefox on JavaScript
Difference Analysis of JavaScript CSS in IE and Firefox
highlights of IE and Firefox compatibility of JS