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.
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 older IE browsers (IE 8 and below)
In legacy IE8 browsers and below, the event model is different from
that of 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.
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.
- Tutorial Introduction
- Mouse and keyboard events
- Example- creating a dropdown menu
- Example continued