The DOM Event Model
Review the W3C DOM2 Event standard recommendation.Mouse Events
Mouse-related events include:
clickmousedownmouseupmouseovermouseoutmousemove
For these events, additional information is provided in the
Event object.
| Mouse Event Properties | |
|---|---|
| Property Name | Description |
altKey, ctrlKey, metaKey, shiftKey |
Boolean values. If true, the associated key was depressed when
the event fired.
|
button |
An integer indicating which mouse button was pressed or released, 1 = left, 2 = middle, 3 = right. A one-button mouse will return only 1, a two-button mouse could return either 1 or 3. |
clientX, clientY |
Give the pixel coordinates of the mouse relative to the client area of the browser, i.e., relative to the viewport, when the event fired. |
relatedTarget |
On a mouseover this indicates the node that the mouse has
left. On a mouseout it indicates the node the mouse has moved
onto.
|
screenX, screenY |
Give the pixel coordinates of the mouse relative to the screen when the event fired. |
As you can see, these properties can be used to determine the position of the mouse, what buttons are depressed and the elements it is moving over or leaving.
clientX and clientY
relative to the page origin, not the viewport. In other words, it includes
scroll offsets.
Notes on Mouse Events
Mouse events are always taken to occur on the lowest element in the document tree. That is, the target of the event will be the most deeply nested element under the mouse when the event occurs.
Clicking a mouse button actually fires three events: mousedown,
mouseup and click which are processed in that order. The
processing is done consecutively, each event must complete its flow (or be
stopped) before the next one begins.
Netscape 6 adds some additional properties related to mouse events such as
layerX, layerY, pageX, pageY and which. These are
provided for backward-compatibility with older versions and are not part of the
standard.
Internet Explorer's event model again differs from the standard. Below are some equivalents to the mouse properties described above.
| Internet Explorer Equivalents | ||
|---|---|---|
| W3C Standard | IE window.event |
Notes |
button |
button |
Still an integer value but the button value is interpreted differently in IE. 0 = none, 1 = left, 2 = right, 3 = left and right, 4 = middle, 5 = left and middle, 6 = middle and right, 7 = left, middle and right. |
relatedTarget |
fromElement, toElement |
For mouseover and mouseout events, these indicate
the elements the mouse is leaving and moving onto.
|
IE also provides offsetX and offsetY which are
similar to layerX and layerY in Netscape, giving the
mouse coordinates relative to the target element. Again, these are not part of
the standard.
Keyboard Events
The DOM2 Event Model does not include specifications for key events.
However, the HTML 4 standard does permit the keyup, keydown and
keypress events for many elements. Both Netscape 6 and IE 5.5
support these and include properties in the Event object to
reflect information on what key or keys were pressed.
In Netscape, the ASCII value of the key is given by the
charCode property on keypress events and in the
keyCode property for keydown and keyup
events.
Internet Explorer stores the Unicode value of the key in the event
keyCode property for all three key events.
In both, the keydown and keyup events will fire
when any modifier key is pressed, such as ALT, CTRL and SHIFT. The
keypress event can be used instead capture combinations such as
SHIFT-A.
Some example key combinations with the relevant property values for each key event type are shown below, arranged by browser.
| IE Key Event Examples | |||
|---|---|---|---|
| Key(s) | keydown |
keyup |
keypress |
| A | keyCode=65 |
keyCode=65 |
keyCode=97 |
| SHIFT | keyCode=16, shiftKey=true |
keyCode=16, shiftKey=false |
n/a |
| SHIFT-A | Whichever key is pressed first fires the event. | Whichever key is released last fires the event. | keyCode=65, shiftKey=true |
| Z | keyCode=90 |
keyCode=90 |
keyCode=122 |
| CTRL | keyCode=17, ctrlKey=true |
keyCode=17, ctrlKey=false |
n/a |
| CTRL-Z | Whichever key is pressed first fires the event. | Whichever key is released last fires the event. | keyCode=26, ctrlKey=true |
| Netscape Key Event Examples | |||
|---|---|---|---|
| Key(s) | keydown |
keyup |
keypress |
| A | charCode=0, keyCode=65, which=65 |
charCode=0, keyCode=65, which=65 |
charCode=97, keyCode=0, which=97 |
| SHIFT | charCode=0, keyCode=16, shiftKey=true |
charCode=0, keyCode=16, shiftKey=false |
n/a |
| SHIFT-A | Whichever key is pressed first fires the event. | Fires separate events for each key, shiftKey=true for A key. |
charCode=65, keyCode=0, which=65, shiftKey=false (yes, false) |
| Z | charCode=0, keyCode=90, which=90 |
charCode=0, keyCode=90, which=90 |
charCode=122, keyCode=0, which=122 |
| CTRL | charCode=0, keyCode=17, ctrlKey=true |
charCode=0, keyCode=17, ctrlKey=false |
n/a |
| CTRL-Z | Whichever key is pressed first fires the event. | Fires separate events for each key, ctrlKey=true for Z key. |
charCode=122, keyCode=0, which=122, ctrlKey=true |
As you can see, the two browsers differ quite a bit in how they handle key events. Also note that some key combinations are reserved by the browser or operating system for shortcut commands or controls. Depending on the browser and platform, you may or may not be able to capture these.