Mouse Events
Mouse-related events include:
click
mousedown
mouseup
mouseover
mousemove
mouseup
For these events, additional information is provided in the Event
object.
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. |
Note: Opera 5 incorrectly measures clientX
and clientY
relative to the page origin, not the viewport. In other words, it includes
scroll offsets.
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.
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.
Browser Specific Properties
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.
Legacy IE8 browsers' event model again differs from the standard. Below are some equivalents to the mouse properties described above.
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.
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 |
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.
- Tutorial Introduction
- Mouse and keyboard events
- Example- creating a dropdown menu
- Example continued