JavaScript Kit- Event Object

JavaScript Kit > DOM Reference > Here

Event Object

Last updated: Februrary 27th, 2006

The Event object keeps tracks of various events that occur on the page, such as the user moving the mouse or clicking on the link, and allows you (the webmaster) to react to them.

The Event model and subsequent object is implemented differently in IE and NS/Firefox. Below we'll list the related properties and methods separately for the two divergent models.

IE Event Object

In IE, the event object is accessed completely through the explicit object "window.event". It supports the following properties:

Properties

Properties	Description	NS Equivalent?
altKey, ctrlKey, shiftKey	Boolean properties that indicate whether the Alt, Ctrl, and Shift keys were pressed at time of the event.	Same.
button	An integer indicating which mouse button was pressed or released, 1 = left, 2 = right, 4 = middle. If multiple buttons are pressed, the value is the sum of both buttons, such as 3 (1+2) for left and right.	Same, but different return values.
cancelBubble	Set to true to prevent the event from bubbling.	stopPropagation()
clientX, clientY	Returns the mouse coordinates at the time of the event relative to upper-left corner of the window. Example(s).	Same.
fromElement, toElement	For mouseover and mouseout events, these properties indicate the elements the mouse is leaving from and moving onto, respectively.	relatedTarget
keyCode	Property indicating the Unicode for the key pressed. Use String.fromCharCode(keyCode) to convert code to string.	charCode
offsetX, offsetY	Returns the mouse coordinates relative to the originating element.	N/A
returnValue	Set to false to cancel any default action for the event.	preventDefault()
srcElement	The element in which the event occurred on.	target
type	A string indicating the type of event, such as "mouseover", "click", etc.	Same.

NS/Firefox Event Object

In NS6+, the event object is accessed by passing an event parameter into the event handler function in question.

Properties

Properties	Description	IE Equivalent?
altKey, ctrlKey, metaKey, shiftKey	Boolean properties that indicate whether the Alt, Ctrl, Meta, and Shift keys were pressed at time of the event.	Same, though IE doesn't support "metaKey".
bubbles	A Boolean value indicating whether or not the event bubbles.	N/A
button	An integer indicating which mouse button was pressed or released, 0 = left, 2 = right, 1 = middle. Slightly different in IE, as described above.	Same, but different return values.
cancelable	A Boolean value indicating whether or not the event can be canceled.	N/A
charCode	Property indicating the Unicode for the key pressed. Use String.fromCharCode(which) to convert code to string.	keyCode
clientX, clientY	Returns the mouse coordinates at the time of the event relative to upper-left corner of the window. Example(s).	Same.
currentTarget	The node that this event handler is currently being run on.	N/A
eventPhase	An integer value indicating which phase of the event flow this event is being processed in. One of CAPTURING_PHASE (1), AT_TARGET (2) or BUBBLING_PHASE (3).	N/A
layerX, layerY	Returns the mouse coordinates relative to the container element. (non standard).	offsetX, offsetY
pageX, pageY	Returns the left and top coordinates of event relative to the top left corner of the visible page. pageY would return the same value as "window.pageYOffset+e.clientY", for example.	N/A
relatedTarget	On a "mouseover" event it indicates the node that the mouse has left. On a "mouseout" event it indicates the node the mouse has moved onto.	fromElement, toElement
screenX, screenY	Returns the coordinates of the mouse relative to the screen when the event fired.	N/A
target	The node that the event originated from.	srcElement
timestamp	Returns the time (in milliseconds since the epoch) the event was created, for example, when a key was pressed (onkeypress). Not all events return a timestamp.	N/A
type	A string indicating the type of event, such as "mouseover", "click", etc.	Same.
which	NS4/NS6+ legacy property indicating the Unicode for the key pressed. Identical to "charCode", except this property works in NS4 as well..	keyCode

Methods

Methods	Description	IE Equivalent?
preventDefault()	Set to true to cancel any default action for the event.	returnValue
stopPropagation()	Set to `true` to prevent the event from bubbling.	cancelBubble

Examples

clientX, clientY (IE)

This example displays in the status bar the current coordinates of the mouse as it moves:

clientX, clientY (NS/Firefox)

This example displays in the status bar the current coordinates of the mouse as it moves, in NS6+: