DOM Events: mouseover/out & mouseenter/leave

Events mouseover/mouseout, relatedTarget

:These events are special, because they have property relatedTarget

If we don’t examine event.target inside the handlers, then it may seem that the mouse pointer left #parent element, and then immediately came back over it. But that’s not the case! The pointer is still over the parent, it just moved deeper into the child element. If there are some actions upon leaving the parent element, e.g. an animation runs in parent.onmouseout, we usually don’t want it when the pointer just goes deeper into #parent. To avoid it, we can check relatedTarget in the handler and, if the mouse is still inside the element, then ignore such event.

 

mouseover event 

: occurs when a mouse pointer comes over an element.
: The mouseover event on a descendant bubbles up. So, if #parent has mouseover handler, it triggers.

 

event.target

: is the element where the mouse came over.

 

event.relatedTarget

: When a mouse leaves one element for another, one of them becomes target, and the other one – relatedTarget.

: is the element from which the mouse came (relatedTarget → target).

 

mouseout 

: occurs when a mouse pointer leaves after mouseover event.

: triggers when the pointer moves from an element to its descendant(parent el to child)

The reverse of mouseover:
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). : If we access event.relatedTarget.tagName, then there will be an error.

 

mousemove

: triggers when the mouse moves.
: Fast mouse move may skip intermediate elements.
  - The browser checks the mouse position from time to time. And if it notices changes then triggers the events.
  - If the visitor is moving the mouse very fast then some DOM-elements may be skipped.

If mouseover triggered, there must be mouseout : In case of fast mouse movements, intermediate elements may be ignored. : but if the pointer “officially” entered an element (mouseover event generated), then upon leaving it we always get mouseout.

 

---

Events mouseenter and mouseleave

: trigger when the mouse pointer enters/leaves the element.

: differences from mouseover/mouseout is; 

   1. Transitions inside the element, to/from descendants, are not counted.
       : only generated events are the ones related to moving the pointer in and out of the top element.
         Nothing happens when the pointer goes to the child and back. Transitions between descendants are ignored.
   2. Events mouseenter/mouseleave do not bubble.

       : so can’t use event delegation.

mouseenter

: triggers when the pointer enters an element.
: The exact location of the pointer inside the element or its descendants doesn’t matter.

 

mouseleave

: triggers when the pointer leaves an element

 

---

 

https://javascript.info/mousemove-mouseover-mouseout-mouseenter-mouseleave

Event List MDN doc