The DOM Event Model
Review the W3C DOM2 Event standard recommendation.Mouse Events
Mouse-related events include:
click
mousedown
mouseup
mouseover
mouseout
mousemove
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.