Event_javascript tips for compatibility between IE and Mozilla

Summary of the compatibility between IE and Mozilla. For more information, see. 1. event usage
Problems: You can directly use the event object in IE, but Mozilla cannot directly use it.
For example: Function doIt () {alert (event);} the script 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
Event) "> 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

1	2
3	4

Function doIt () {alert (event. srcElement. tagName );}

Script

Moz

1	2
3	4

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
Function doIt () {alert (event. keyCode);} script

Moz
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

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

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
Var Button = document. getElementById ("testBT"); oButton. attachEvent ("onclick", clickEvent); function clickEvent () {alert ("Hello, World! ");} Script

Moz
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
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
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
Alert (document. myForm); alert (document. forms. length); // The result is 0 ??? Script

Moz
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

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

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
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
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

P1 Var Div = document. getElementById ("p1"); var htmlInput =" "; 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

P1

Var Div = document. getElementById ("p1 ");

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