The difference between the Window.event object in JS and IE and FF

Source: Internet
Author: User

The event object is valid only in the course of occurrence.

Some properties of an event are only meaningful for a particular event. For example, the fromelement and toelement attributes are only meaningful for onmouseover and onmouseout events.
1, window.event
IE: There are window.event objects
FF: No Window.event object. You can pass an event object to a parameter of a function. such as Onmousemove=domousemove (event)
2, the mouse current coordinates
Ie::event.x and Event.y.
FF:event.pagex and Event.pagey.
General: Both have Event.clientx and Event.clienty attributes.
3, the mouse current coordinates (plus the scroll bar roll over the distance)
IE:event.offsetx and Event.offsety.
FF:event.layerx and Event.layery.
4, the coordinates of the x and Y of the label: Style.posleft and Style.postop
IE: there is.
FF: No.
General: Object.offsetleft and Object.offsettop.
5, the height and width of the form
IE:document.body.offsetwidth and Document.body.offsetheight. Note: The page must have a body tag at this point.
FF:windows.innerwidth and Windows.innerhegiht, as well as document.documentelement.clientwidth and
Document.documentelement.clientheight.
General: Document.body.clientwidth and Document.body.clientheight.

6. Adding events
Ie:element.attachevent ("onclick", func);
Ff:element.addeventlistener ("Click", Func, True).
General: Element.onclick=func. Although you can use the OnClick event, the effect of the onclick and the above two methods is not the same, onclick only executes a process, and attachevent and AddEventListener execute a list of processes, that is, multiple processes. Cases
such as: Element.attachevent ("onclick", func1), Element.attachevent ("onclick", Func2) so func1 and Func2 will be
Yes.

7, the label custom properties
IE: if a property value is defined for the label DIV1, the value can be obtained Div1.value and div1["value".
FF: cannot be taken with Div1.value and div1["value".
General: 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: The types of events, such as Onlick in the click;
Srcelement/target: The event source, is the element that occurs;
Button: the mouse button declared to be pressed, Integer, 1 for the left, 2 for the right, 4 for the key, if you press more than one key, the wine added to these values, so 3 on behalf of the left and right keys pressed at the same time; (Firefox 0 for the left, 1 for the middle key, 2 for the right-hand button)
Clientx/clienty: The position of the mouse relative to the upper-left corner of the viewable document area of the browser window when the event occurs (in the DOM standard, neither of these property values considers the document's scrolling, that is, wherever the document scrolls, whenever the event occurs in the upper-left corner of the window, Clien Tx and Clienty are both 0, so in IE, to get the coordinates of the event to occur relative to the beginning of the document, add
Document.body.scrollleft and Document.body.scrolltop)
Offsetx,offsety/layerx,layery: When the event occurs, the mouse is relative to the position of the upper-left corner of the source element;
X,y/pagex,pagey: Retrieves an integer relative to the parent element's mouse horizontal coordinate;
Altkey,ctrlkey,shiftkey, etc.: Returns a Boolean value;
KeyCode: Returns the code of the key at the time of KeyDown where KeyUp event occurred, and the Unicode character of the KeyPress event; (Firefox2 is not supported Event.keycode and can be replaced by Event.which)
Fromelement,toelement: The former refers to the MouseOver event in the mouse moved the document element, which refers to the Mouseout event in the mouse moved to the document elements;
Cancelbubble: A Boolean property that, when set to true, will stop the event further bubbling to an containment-level element;
(e.cancelbubble = true; equivalent to e.stoppropagation ();)
ReturnValue: A Boolean property that, when set to False, organizes the browser to perform the default event action; (E.returnvalue = false; equivalent to E.preventdefault ();)
Attachevent (), DetachEvent ()/addeventlistener (), RemoveEventListener: A method for registering multiple event-handling functions for the development of DOM object event types, which have two parameters, the first is the event type, The second one is the event handler function. At the time the Attachevent () event executes, the This keyword points to the Window object, not to the element in which the event occurred;
Screenx, Screeny: The position of the mouse pointer relative to the upper-left corner of the display, if you want to open a new window, these two properties are important;

Ii. Some notes:


1, event represents the state of events, such as triggering event object elements, the mouse position and state, pressed the key, and so on;
2, the event object only in the process of the occurrence of the effective.
3, Firefox in the event and IE in the different, ie in the global variable, ready to use, Firefox in the parameters to boot to use, is the run-time temporary variables.
4. In ie/ Opera is window.event, in Firefox is event, and the object of the event, in IE is window.event.srcelement, in Firefox is Event.target,opera both are available.
5. The following two sentences have the same effect
var evt = (evt)? EVT: ((window.event)? window.event:null);
var evt = evt | | window.event; Firefox under window.event is null, ie the event is null
third, the bubble of the event in IE
in IE, events can bubble up to the top of the containment layer a little bit, that is to say, the event handlers defined by the underlying DOM nodes, to the upper nodes if there is an event handler for the same event type as the lower level, then the top-level event handler is executed. For example, a div tag contains a, and if both tags have a handler for the OnClick event, the execution is done by first executing the OnClick event handler for label A, and then executing the DIV's event handler function. If you do not want to execute the OnClick event handler for the Upper Div after the event handler function is finished, set the cancelbubble to true.
Four, window.event

(1) Existing problems:
Unable to run on FF using window.event
(2) Solution:
The event in FF can only be used on the spot where the incident occurred, and this issue cannot be resolved temporarily. You can do this:
Original code (can 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 (can run in IE and MF):

  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 in the new code does not change, the same as the old code (that is, the gotosubmit call does not give the parameter), it still can only run in IE, but not error. So, the TPL part of this scenario is still compatible with the old code

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.