Keyboard and Mouse buttons events
The Event object keeps track and lets you react to keyboard and mouse events, such as when a particular keyboard or mouse button is pressed. This is realized through 4 event handlers and a few Event object properties.
Keyboard/ Mouse event handlers
|onkeypress||Fires when the user presses a key on the associated
element (ie: document, DIV etc). A combination of
|onkeydown||Fires when the user depresses a key (but not yet released) on the associated element.|
|onkeyup||Fires when the user releases a key after having depressed it on the associated element.|
|onclick||Fires when the user clicks on an element. A
|onmousedown||FIres when the user holds the mouse down over an element.|
|onmouseup||Fires when the user releases the mouse after having hold it down over the element.|
|ondblclick||Fires when the user double clicks the mouse over an element.|
Keyboard Event object properties
Below lists the relevant properties within the
Event Object that
cater to keyboard actions. Recall that in IE, the event object is accessed
window.event, while in Firefox and other browsers, it
is indirectly passed as the first parameter the callback function associated
with this event.
|altKey, ctrlKey, shiftKey||Boolean properties that indicate whether the Alt, Ctrl, or Shift keys were pressed at time of the event.|
|charCode||Returns the character code of the key pressed during
|isChar||Boolean property that indicates if the key pressed has a character associated with it. If the user pressed "F1" for example, the property returns false. Buggy as of Firefox 2.x, not supported in most other browsers (ie: IE, Opera 9 etc).|
|keyCode||Property indicating the key code pressed during an
Be careful when accessing the
Compare this example (try pressing "a" or "Shift a" in the "char" field):
to this example (try pressing "a" or "Shift a" in the "char" field):
|metaKey||Boolean property indicating whether the META key was pressed. NOT supported in IE.|
|returnValue||Set to false to cancel any default action for the event.|
|which||Returns the unicode value of the key pressed whether
it has a character associated with it or not. Behaves similar to IE's
version of the
The below table lists the Unicode character code value of the primary keys on your keyboard:
Mouse Event object properties
Below lists the relevant properties within the Event Object that cater to which mouse button(s) was pressed.
|button||An integer indicating which mouse button was
You should not count on this order across browsers and different mouse devices. In IE6 and lower for example, 1 is used to indicate left button instead, for example.
Example- Live validation of a text field to only allow alphabetical (upper and lower case), SPACE and the BACKSPACE keys.
The following example uses the Event Object and keyboard related properties to only allow alphabetical keys plus BACKSPACE and SPACE in a form field.
<input type="text" id="alphanumeric" size="25"></textarea>
var e=window.event || e
var keyunicode=e.charCode || e.keyCode
//Allow alphabetical keys, plus BACKSPACE and SPACE
return (keyunicode>=65 && keyunicode<=122 || keyunicode==8 || keyunicode==32)? true : false
- Global functions
- Escape Sequences
- Reserved Words
- Ajax (XMLHttpRequest)
- JSON object