from JavaScript.info
Up to 21 mins on Part 3 Traversy
| action | what it does |
|---|---|
mousedown or mouseup |
Mouse button is clicked/released over an element. |
mouseover or mouseout |
Mouse pointer comes over/out from an element inc inner elements. |
mouseenter or mouseleave |
Every mouse move over an element triggers that event. |
mousemove |
Every mouse move over an element triggers that event. |
click |
Triggers after mousedown and then mouseup over the same element if the left mouse button was used. |
dblclick |
Triggers after two clicks on the same element within a short timeframe. Rarely used nowadays. |
contextmenu |
Triggers when the right mouse button is pressed. There are other ways to open a context menu, e.g. using a special keyboard key, it triggers in that case also, so it’s not exactly the mouse event. |
The first two boxes show the problem with mouseover and mouseout. These are set on the container box yet the child, an <h3> is affected once it is hovered over.
Using mouseenter and mouseleave fixes the problem
mouseover and mouseout
mouseenter and mouseleave
When hovered over box3 uses the x and y coordinates as the first two rgb values for the background colour.
mousemove
gives the coordinates of where on the button you clicked.
The mouse property
This finds the mouse button.
- 0 is the left mouse button
- 1 is the middle mouse button
- 2 is the right mouse button
- 3 is the x1, back button
- 4 is the x2, forward button