Categories:
Partners

Mouse Events

Mouse-related events include:

  • click
  • mousedown
  • mouseup
  • mouseover
  • mousemove
  • mouseup

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.

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.

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.

Copyright 1997-2014 JavaScript Kit. NO PART may be reproduced without author's permission.