JavaScript Mouse Events

Summary: in this tutorial, you will learn about the basic mouse events and their properties in JavaScript.

Introduction to JavaScript mouse events

Mouse events fire when you use the mouse to interact with the elements on the page. DOM Level 3 events define 10 mouse events:

1. mousedown
2. mouseup
3. click
4. dblclick
5. mousemove
6. mouseover
7. mouseout
8. mouseenter
9. mouseleave
10. wheel (added for scrolling)

mousedown, mouseup, and click events

When you click an element, there are no less than three mouse events fire in the following sequence:

1. The mousedown fires when you press the mouse button on the element.
2. The mouseup fires when you release the mouse button on the element.
3. The click fires when one mousedown and one mouseup detected on the element.

If you press the mouse button on an element, move your mouse cursor off the element, and then release the mouse button. The only mousedown event fires on the element.

Likewise, if you press the mouse button, move the mouse over the element, and release the mouse button, the only mouseup event fires on the element.

In both cases, the click event never fires.

dblclick event

In practice, you rarely use the dblclick event. The dblclick event fires when you double-click over an element.

It takes two click events to cause a dblclick event to fire. The dblclick event has four distinct events fired in the following order:

1.  mousedown
2.  mouseup
3.  click
4.  mousedown
5.  mouseup
6.  click
7.  dblclick