The HTML onmouseout attribute is an event handler that triggers script execution when the mouse pointer is moved away from an element or any of its children.
Definition and Usage
➔ It is used to trigger dynamic changes when the pointer moves outside of an element, which improves the user experience.
➔ The mouseout event bubbles (propagates up the DOM hierarchy), meaning it is executed even if the pointer moves to a child element. The mouseleave event does not bubble, it is only triggered when the pointer leaves the element, not outside its descendants.
Syntax
//In HTML
<element onmouseout="myFunction()"></element>
//In javascript
object.onmouseout = function() {myFunction()};
// Or using addEventListener
object.addEventListener("mouseout", myFunction);
Single left or middle mouse button click event sequence:
- 1 onmousedown - is triggered when the mouse button is initially pressed down.
- 2 onmouseup - is triggered when the mouse button is released.
- 3 onclick - is fired after both mousedown and mouseup events.
Double left click event sequence:
- 1 onmousedown - is triggered when the mouse button is initially pressed down.
- 2 onmouseup - is triggered when the mouse button is released.
- 3 onclick - is triggered after both mousedown and mouseup events.
- 4 onmousedown - is triggered when the mouse button is initially pressed down.
- 5 onmouseup - is triggered when the mouse button is released.
- 6 onclick - is triggered after both mousedown and mouseup events.
- 7 ondblclick - is triggered after two complete click sequences within about 300-500 milliseconds.
Right click event sequence:
- 1 onmousedown - is triggered when the mouse button is initially pressed down.
- 2 onmouseup - is triggered when the mouse button is released.
- 3 oncontextmenu - is triggered when the right mouse button is pressed and released.
Mouse movement event sequence:
- 1 onmouseover - is triggered when the pointer moves over an element or one of its descendants (bubble in the DOM hierarchy, see opposite onmouseout).
- 2 onmouseenter - is triggered when the pointer enters the element, not its descendants (there is no bubble in the DOM hierarchy).
- 3 onmousemove - is triggered repeatedly when the pointer moves over an element.
- 4 onmouseout - is triggered when the pointer moves out of an element or into one of its descendants (there is no bubble in the DOM hierarchy).
- 5 onmouseleave - is triggered only when the pointer explicitly leaves the element's bounds, not outside its descendants (bubble in the DOM hierarchy, see opposite onmouseenter).
Applies to
This attribute can be used on the following element.
| Attribute | Element |
|---|---|
| onmouseout | All visible elements |