Differences between window. event objects in ie and ff in js

This article will introduce the differences between window. event objects in js and ie and ff. If you need to know what to learn, you can refer to them.

1. The event object is valid only when an event occurs.

Some Properties of the event only make sense for specific events. For example, the fromelement and toelement attributes only make sense for onmouseover and onmouseout events.
1. window. event
IE: window. event object
FF: There is no window. event object. You can pass the event object to the function parameters. For example, onmousemove = domousemove (event)
2. Current mouse Coordinate
IE: event. x and event. y.
FF: event. pagex and event. pagey.
Generic: both have the event. clientx and event. clienty attributes.
3. The current coordinates of the mouse (plus the scroll bar rolling distance)
IE: event. offsetx and event. offsety.
FF: event. layerx and event. layery.
4. Coordinates of tag x and y: style. posleft and style. postop
IE: Yes.
FF: No.
Generic: object. offsetleft and object. offsettop.
5. Form height and width
IE: document. body. offsetwidth and document. body. offsetheight. Note: The page must have a body tag.
FF: windows.innerwidthand windows.innerhegihtto use document.doc umentelement. clientwidth and
Document.doc umentelement. clientheight.
Generic: document. body. clientwidth and document. body. clientheight.

6. Add events
Ie: element. attachevent ("onclick", func );.
Ff: element. addeventlistener ("click", func, true ).
Generic: element. onclick = func. Although the onclick event can be used, the effect of onclick is different from that of the above two methods. onclick only executes one process, while attachevent and addeventlistener execute one process list, that is, multiple processes. Example
For example, element. attachevent ("onclick", func1); element. attachevent ("onclick", func2) will be executed by func1 and func2.
Line.

7. Custom Attributes of tags
Ie: If you define an attribute value for the label div1, you can obtain this value using div1.value and div1 ["value.
Ff: you cannot use div1.value or div1 ["value.
General purpose: div1.getattribute ("value ").

8. parent node, child node, and delete node
Ie: parentelement, parement. children, element. romovenode (true ).
Ff: parentnode, parentnode. childnodes, node. parentnode. removechild (node ).

9. type: event type, such as click in onlick;
Srcelement/target: the event source, which is the element of the event;
Button: Declares the mouse key to be pressed. An integer. 1 indicates the left button, 2 indicates the right button, and 4 indicates the middle button. If you press multiple keys, add these values to the wine, so 3 indicates that both the left and right keys are pressed. (In firefox, 0 indicates the left button, 1 indicates the middle key, and 2 indicates the right button)
Clientx/clienty: when an event occurs, the cursor is relative to the position in the upper left corner of the visible document area in the browser window. (In dom standard, neither of these two attribute values takes into account the scrolling of the document. That is to say, no matter where the document is rolled, as long as the event occurs in the upper left corner of the window, clientx and clienty are both 0. Therefore, in ie, to obtain the coordinates of the event relative to the position at the beginning of the document, add
Document. body. scrollleft and document. body. scrolltop)
Offsetx, offsety/layerx, layery: when an event occurs, the cursor is relative to the position in the upper left corner of the source element;
X, y/pagex, pagey: returns an integer relative to the horizontal coordinate of the cursor of the parent element;
Altkey, ctrlkey, and shiftkey: return a Boolean value;
Keycode: return the code of the key when the keydown event occurs, and the unicode Character of the keypress event; (firefox2 does not support event. keycode, which can be replaced by event. which)
Fromelement, toelement: The former refers to the document elements that move the mouse over the mouseover event, and the latter refers to the document elements that move the mouse over the mouseout event;
Cancelbubble: A boolean attribute. When it is set to true, the Stop event is further blister to the element of the inclusion level;
(E. cancelbubble = true; equivalent to e. stoppropagation ();)
Returnvalue: A boolean attribute. When set to false, the browser can be organized to execute the default event action. (e. returnvalue = false; equivalent to e. preventdefault ();)
Attachevent (), detachevent ()/addeventlistener (), removeeventlistener: The method for registering multiple event handler functions for dom object event types. They have two parameters. The first one is the event type, the second is the event processing function. When the attachevent () event is executed, this keyword points to the window object rather than the element where the event occurs;
Screenx and screeny: the position of the mouse pointer relative to the upper left corner of the monitor. If you want to open a new window, these two attributes are very important;

Ii. Notes:

1. event indicates the event status, such as the element that triggers the event object, the location and status of the mouse, and the key to be pressed;
2. The event object is valid only when an event occurs.
3. The event in firefox is different from that in ie. The global variables in ie are available at any time. firefox can only be used for parameter guidance and is a temporary variable during runtime.
4. You can use both of them in ie/opera.
5. The following two statements have the same effect.
Var evt = (evt )? Evt: (window. event )? Window. event: null );
Var evt = evt | window. event; // in firefox, window. event is null, and in ie, event is null.
3. Blister of events in ie
In ie, events can bubble up to the upper level along the inclusion level. That is to say, the lower level dom node defines the event processing function. If there is an event processing function of the same event type as the lower level node, the upper-layer event processing function will also be executed. For example, the div tag contains a. If both labels have The onclick event processing function, The onclick event processing function of tag a is executed first, then execute the div event processing function. If you do not want to execute the onclick event processing function of the upper div after the expected event processing function is executed, set cancelbubble to true.
4. window. event

(1) existing problems:
Windows. event cannot be run on FF.
(2) solution:
FF event can only be used in the event. This problem cannot be solved. This can be changed as follows:
Original code (can be run in IE ):

The Code is as follows:	Copy code
<Input type = "button" name = "someButton" value = "Submit" onclick = "javascript: gotoSubmit ()"/> ... <Script language = "javascript"> Function gotoSubmit (){ ... Alert (window. event); // use window. event ... } </Script>

New Code (run in IE and MF ):

The Code is as follows:	Copy code
<Input type = "button" name = "someButton" value = "Submit" onclick = "javascript: gotoSubmit (event)"/> ... <Script language = "javascript"> Function gotoSubmit (evt ){ Evt = evt? Evt: (window. event? Window. event: null ); ... Alert (evt); // use evt ... } </Script>

In addition, if the first line of the new Code is not modified, it is the same as the old code (that is, the gotoSubmit call does not provide a parameter), it can only be run in IE, but no error occurs. Therefore, the tpl part of this solution is still compatible with the old code.