Learn about events that can be fired due to mouse event.
The most common group of event used on the Web is the Mouse Events, as a mouse is the most primary navigation device.
There are in all nine mouse events defined in the DOM Level 3 Events.
All elements on a webpage support mouse events, and when you cancel the default behaviour of mouse event it affects other events as well, as events are related amongst themselves.
Table : Functions and Properties of Event Object.
|click||Triggered when the mouse button is clicked and released|
|dbclick||Triggered when the mouse button is clicked and released twice.|
|mousedown||Triggered when the mouse button is clicked|
|mouseenter||Triggered when the pointer is moved to be within the screen region occupied by the element or one of its descendants|
|mouseleave||Triggered when the pointer is moved to be outside the screen region occupied by the element and all its descendants.|
|mousemove||Triggered when the pointer is moved while over the element|
|mouseout||This is the same as for mouseleave, except that this event will trigger while the pointer still over the descendant element.|
|mouseover||This is the same as for mouseenter, except that this event will trigger while the pointer is still over a descendant element.|
|mouseup||Trigger when the mouse button is released|
Table : The MouseEvent Object.
|button||Indicates which button has been clicked; 0 is the main mouse button, 1 is the middle button, and 2 is the secondary/right button||number|
|altKey||A true value is returned if the alt/option key was clicked when the event was triggered.||boolean|
|clientX||Returns the X position of the mouse when the event was triggered, relative to the element's viewpoint .||number|
|clientY||Returns the Y position of the mouse when the event was triggered, relative to the element's viewpoint.||number|
|screenX||Returns the X position of the mouse when the event was triggered, relative to the screen coordinate system.||number|
|screenY||Returns the Y position of the mouse when the event was triggered, relative to the screen coordinate system.||number|
|shiftKey||A true is returned if the shift key was pressed when the event ws triggered||boolean|
|ctrlKey||A true is returned if the CTRL key was pressed when the event was triggered||boolean|
Using DOM to setup Event Handling
The Event handlers explained in the introduction were very simple and can be used to perform only basic tasks.
The below demo shows a basic application on using an Event Object and how to use the DOM to attach a function with an event.
There is a parameter called e. It is attached to an Event object created by the browser and that represents the event when it is triggered.
The property target is used to get the HTMLElement that triggered the event so that style rules can be applied to the element.
The Event listeners have a function similar to that of event handlers, the difference it that there is no limitation of the handler when assigning multiple function to the same DOM element and event.
The syntax of an event listener is bit different from an handler, it has no equal to sign and it looks similar to a native method.
You can add as many event listeners as you wish to an element.
In the below demo, the second text block is registered with two event handlers. When you roll the move over the content, the text is styled.
And when a click event occurs the background color and font-size is changed.
Keyboard events are created as a response to keypress on the keyboard. A detailed list of keyboard events are provided in the table below:
|keydown||Tiggered when the user presses a key|
|keypress||Triggered when the user presses and releases a key.|
|keyup||Triggered when the user releases the key|
|char||To return the character represented by the key press||string|
|key||It returns the key that was pressed.||string|
|ctrlKey||It returns true if the Ctrl key was down when the key was pressed.||boolean|
|shiftKey||It returns true if the Shift key was down when the key was pressed||boolean|
|altKey||It Returns true is the Alt key was down when the key was pressed.||boolean|
|repeat||It returns true if the key is being held down||boolean|
In the below demo, the script is used to display key strokes entered within a pair of input elements.
The function String.fromCharCode is used to convert the value of keyCode property into a readable value.
|blur||Is Triggered when the element loses the focus|
|focus||Is Triggered when the element gains the focus|
|focusin||Is triggered when the element is just about to gain the focus.|
|focusout||Is Triggered when the element is just about the lose focus|
|relatedTarget||The element that is about to gain or lose the focus.||HTMLElement|
In the demo below, the script uses the focus and blur events to change the style of a pair of input elements.