Categories:

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:

<script type="text/javascript">
function displaycoordIE(){
window.status=event.clientX+" : "+event.clientY
}
document.onmousemove=displaycoordIE
</script>

clientX, clientY (NS/Firefox)

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

<script type="text/javascript">
function displaycoordNS(e){
window.status=e.clientX+" : "+e.clientY
}
document.onmousemove=displaycoordNS
</script>

Sponsored By

DD CSS Library
Free CSS menus and codes to give your site a visual boost.

DOM Window
DOM Document
DOM Element
DOM Event
DOM Style
DOM Table
Miscellaneous

 

CopyRight 1998-2012 JavaScript Kit. NO PART may be reproduced without author's permission.