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

Home

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

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.

Mouse and keyboard events