Events 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.

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

Events mouseenter and mouseleave

Events mouseenter/mouseleave are like mouseover/mouseout. They trigger when the mouse pointer enters/leaves the element.
But there are two important differences:

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

These events are extremely simple.
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.
This example is similar to the one above, but now the top element has mouseenter/mouseleave instead of mouseover/mouseout.
As you can see, the 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
当一个元素触发了mouseenter事件，它上面的元素直接忽略，不再触发。只触发添加了事件handle的元素变化。mouseover，mouseout会触发。