Categories:
Partners

Event handling in the DOM- Part 2 (the event object)

Tutorial written and contributed by Mike Hall of BrainJar. Edited/ minor additions by JK. Please see tutorial footnote for additional/bio info on author.

Behind every intelligent entity is a brain, and in the case of event handlers, that one is the event object. As you move your mouse around or click a link in the document, this DOM object processes and furthermore makes available this data back to you the developer. With it, things such as retrieving the precise coordinates of the mouse is or what key was pressed becomes possible.

The following is an overview on the event object of the DOM and its supported properties/ methods. Divergence in terms of browser support is also noted.

Primary properties/ methods of the event object

Recall that event handlers are passed one argument, an Event object. It provides several properties describing the event and its current state. You can use these to determine where an event originated from and where it currently is in the event flow. Or use methods it provides to stop the event from flowing on and/or cancel the event.

DOM event object properties and methods
Property Name Description
bubbles A Boolean value indicating whether or not the event bubbles.
cancelable A Boolean value indicating whether or not the event can be canceled.
currentTarget The node that this event handler is assigned to.
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).
target The node that the event originated from.
timeStamp The time the event occurred.
type A string indicating the type of event, such as "mouseover", "click", etc.
Method Name Description
preventDefault() Can be used to cancel the event, if it is cancelable. This prevents the browser from performing any default action for the event, such as loading a URL when a hypertext link is clicked. Note that the event will continue propagating along the normal event flow.
stopPropagation() Stops the event flow. This can be used on either the capture or bubble phase.

Note that using preventDefault() or stopPropagation() affects only the current, active instance of an event.

-The event object of IE5+

IE does not currently support the W3C Event model. Instead of passing an Event object to a handler function, it provides a single, global object named window.event which contains much of the same information.

Unfortunately, the property names defined for this object do not match the standard model. Below is a table of equivalent properties in these two models.

Internet Explorer Equivalents
W3C Standard IE window.event Notes
currentTarget none Use the this keyword to determine which element the handler is assigned to.
eventPhase none Not applicable in IE.
target srcElement The node that the event originated from.
timeStamp none Not available in IE.
type type Equivalent to the standard.
preventDefault() returnValue Set to true to cancel any default action for the event.
stopPropagation() cancelBubble Set to true to prevent the event from bubbling.

Note that cancelBubble and returnValue are Boolean properties, not method calls. Setting them to an appropriate value is equivalent to calling stopPropagation() or preventDefault().

The above listed properties are common to all event types. Some additional properties are available for specific events related to the mouse and keyboard, which we will see next.