Compatibility rollup event_javascript techniques for IE and Mozilla

1, about the use of the event
There is a problem: ie can directly use the event object, but Mozilla can not be used directly.
For example: <input type= "button" value= "ClickMe" nclick= "DoIt ()" >

<script. language= "JavaScript" >

function DoIt () {

alert (event);

}

</script> This code does not work in Mozilla browsers because there is no default event object in the Mozilla browser and can only be used on the spot where the event occurred.
Here's a look at both compatible code:
Ie&moz
<input type= "button" value= "ClickMe" nclick= "doIt" ( event) >

<script. language= "JavaScript" >

function doIt ( oevent) {

alert (oevent);

}

</script>

2, about Event.srcelement[ie] and Event.target[moz]
Mozilla under the E.target equivalent to IE under the event.srcelement, but the details are different, the latter is to return an HTML Element
Instead, E.target returns a node, which means that the text node is included.
Look at the following example code, you can see the difference between the two and the relationship:
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, the keyboard value of the acquisition
The Event.which under Mozilla is equivalent to the event.keycode under IE.
See 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]
IE, take the absolute position of mouse clicks, Use the event object's event.x and Event.y
Moz to take the absolute position of the mouse click, using the Event object's Event.pagex and Event.pagey
So in order to be compatible, you need to do the processing, the reference code is as follows:
IE &moz
<div id= "mydiv" nclick= "DoIt" (event) "style=" position:absolute;top:100;left:100 : 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? oeve Nt.y:oevent.pagey; Alert ("X:" + posx + "\ny:" + posy)}</script>

5, Event.offsetx,event.offsety[ie] and Event.pagex,event.pagey[moz]
IE take the relative position of mouse clicks, Use the Event.offsetx and event.offsety
Moz of the event object to take the relative position of the mouse click, using the Event object's Event.layerx and Event.layery
So 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; : 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 = OE Vent.offsety? OEvent.offsetY:oEvent.layerY; Alert ("X:" + posx + "\ny:" + posy)}</script>

6, Event binding
Event bindings on Mozilla with Addeventlistener,removeeventlistener
corresponding to the attachevent,detatchevent of IE
Look at 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 part of the blue Word. IE should be added on before the event, but not in the Moz.
Object Selection Chapter
1, accessing HTML elements by ID
Generally direct use of document.getElementById on it, if you want to be compatible with IE4, you can 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 Document.form.item similar access methods, be aware of the following questions:
A statement like Document.formName.item ("ItemName") is allowed in IE, but it is not possible under Moz
If you want to operate under Mozilla, you need to formalize your writing, 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, when you access an array, you cannot use a form similar to arr ("ItemName"), and you must use the brackets, both in IE.
In addition, while writing the test code above, I found an interesting problem with the Mozilla browser, not knowing if it was 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); Result is 1, normal </script>

Personally, it's probably because Mozilla is too compliant with DOM standards.
Dom Chapter
1, delete the node
IE in the Removenode method, you can delete the node, as follows:
Ie
<input type= "button" value= "ClickMe" id= "MyButton" >

<script. language= "JavaScript" >

document.getElementById ("MyButton"). Removenode ();

</script>

However, there is no such method in Mozilla, which can only be found by first finding the parent node, and then invoking the DOM method RemoveChild to 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, switching nodes
There are swapnode methods in IE to exchange two HTML element nodes, as follows:
Ie
<input type= "button" value= "id=" "Firstbutton" ><input type= "button" value= "second" id= "Secondbutton" ><script. language= "JavaScript" > var-document.getelementbyid ("Firstbutton"); var Second = document.getElementById ("Secondbutton"); Ofirst.swapnode (Osecond);</script>

But in Mozilla, there is no such method, you can write your own function implementation, as follows:
Ie&moz
<input type= "button" value= "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-i = document.getElementById ("Firstbutton"); var Second = document.getElementById ("Secondbutton"); Ofirst.swapnode (Osecond);</script>

3, about the insertion of the node
In IE, there are insertadjacenthtml and insertadjacentelement two useful methods, as follows:
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, in Mozilla there are no these two methods, in order to compatible with them, the unified use of the DOM InsertBefore method, 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 has, Moz is not
More related articles
Discussion on compatibility of IE and Firefox in JavaScript application
A summary of 7 different ways of writing IE and Firefox on JavaScript
JavaScript css in IE and Firefox difference analysis
JS's IE and Firefox compatibility highlights