Search within TutorialsPark

Javascript Mouse Events


Learn about events that can be fired due to mouse event.


Javascript Mouse Events

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.

Name Description
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.

Name Description Return
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

Example: Javascript Events: Using a type Property.

Give it a TRY! » Note: The property type is used to figure out what kind of event you are working with.


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.

So in order to use events to perform more complex and sophisticated handling, you must use the DOM and JavaScript Event Object.

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.

Example: Javascript DOM for Event Handling.

Give it a TRY! » Note:JavaScript is kept at the bottom because it has work with the DOM.


Javascript Mouse Events: Attach Event Listener

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.

Example: Javascript Mouse Events: Attach Event Listener

Give it a TRY! » Note: Click on the text to see the effects.


Javascript Mouse Events: Slide Show

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.

Example: Javascript Events : Registering Multiple Events

Give it a TRY! » Note: The onclick property is used to set up the handler for click event.


Javascript Keyboard Events

Keyboard events are created as a response to keypress on the keyboard. A detailed list of keyboard events are provided in the table below:

Example: Javascript Events : Removing Event Listeners

Name Description
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

Example: Javascript Events : Removing Event Listeners

Name Description Returns
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

Javascript Keyboard Events

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.

Example: Javascript Keyboard Events : Working with Keyboard Events

Give it a TRY! » Note: The event listener for the first paragraph has been removed.


Javascript Focus Events

The JavaScript Focus related events are triggered when an element gains or loses focus.

Example: Javascript Events : Removing Event Listeners

Name Description
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

Table: Javascript Focus Event

Name Description Returns
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.

Example: Javascript Focus Events : Working with Focus Events

Give it a TRY! » Note: Events are represented by FocusEvent object, which is used to add property