JS DOM - 04.02 - Moving Mouse

mouseover, mouseout, relatedTarget

The mouseover event occurs when a mouse pointer comes over an element, and mouseout – when it leaves. These events are special, because they have property relatedTarget. This property complements target. When a mouse leaves one element for another, one of them becomes target, and the other one – relatedTarget.

For mouseover:

• event.target – is the element where the mouse came over.
• event.relatedTarget – is the element from which the mouse came (relatedTarget → target).

For mouseout the reverse:

• event.target – is the element that the mouse left.
• event.relatedTarget – is the new under-the-pointer element, that mouse left for (target → relatedTarget).

The relatedTarget property can be null. Means that the mouse came not from another element, but from out of the window. Or that it left the window.

Skipping elements

The mousemove event triggers when the mouse moves. But that doesn’t mean that every pixel leads to an event.

The browser checks the mouse position from time to time. And if it notices changes then triggers the events. That means that if the visitor is moving the mouse very fast then some DOM-elements may be skipped:

Mouseout when leaving for a child

Events mouseenter and mouseleave

When the pointer enters an element – mouseenter triggers. The exact location of the pointer inside the element or its descendants doesn’t matter.

When the pointer leaves an element – mouseleave triggers.

1. Transitions inside the element, to/from descendants, are not counted.
2. Events mouseenter/mouseleave do not bubble.