Mouse events occur when the user moves the mouse or clicks a mouse button.

There are three events that indicate the current state of mouse movement.

• the onmousemove event fires when the user moves the mouse;
• the onmouseover event fires whenever the mouse cursor moves over an element;
• the onmouseout event fires whenever the mouse cursor moves out of an element.

When moving between elements, the event sequence is as follows:

• The onmouseout event fires first to indicate that the mouse has left the original element.
• Next the onmousemove event fires, indicating that the mouse has moved.
• Finally, onmouseover event fires to indicate that the mouse has entered the new element.

For the onmouseover and onmouseout events, the event object’s toElement and fromElement properties specify the elements the mouse is moving to and from.

There are four events that indicate the current state of the mouse click.

The onmousedown and onmouseup events fire when the left mouse button changes state as it is pressed or released, respectively.

The onclick event fires when the user presses and releases the button.

 Show me 

The ondblclick event occurs when the elapsed time between two consecutive onclick events is within a system-defined range.

 Show me 

When a click event occurs, the button property of the event object identifies which mouse button, if any, is down. The x and y properties specify the location, or coordinates of the mouse at the time of the event.

Mouse click events are interspersed with onmousedown and onmouseup events. For click events, the sequence is as follows: onmousedown, onmouseup, onclick, onmouseup, ondblclick.

An onclick event can also occur when the user presses the ENTER key on a focusable element, such as a BUTTON element. In this case, the event fires without a preceding onmouseup event.

We can cancel a mouse click by returning false or setting the returnValue property to false.

Note that for mouse devices that have one button, the button property refers to the left mouse button.

The following example demonstrates what we have discussed thus far.

 Show me