Differences between events mouseover, mouseout, mouseenter, and mouseleave _ javascript skills

Mouseover, mouseout, mouseenter, and mouseleave are all events triggered by mouse clicks. What do they mean and what are the differences? Let's take a look at the online examination and course store that we have recently encountered the following problem: a layer appears when the mouse slides over, when the mouse slides to the current layer, mouseover and mouseout will flash in earlier browsers. There are many ways to solve this problem, however, I think the simplest way is to replace mouseover and mouseout with the corresponding mouseenter and mouseleave.

A mouseover event occurs when the cursor is over the element.

This event is usually used with a mouseout event.

Note: Unlike the mouseenter event, a mouseover event is triggered no matter the mouse pointer passes through the selected element or its child element. The mouseenter event is triggered only when the mouse pointer passes through the selected element.

Note: Unlike the mouseleave event, a mouseout event is triggered no matter the mouse pointer leaves the selected element or any child element. The mouseleave event is triggered only when the mouse pointer leaves the selected element. See the example below.

When the mouse pointer passes through the element, the mouseenter event occurs. This event is usually used with the mouseleave event.

Note: mouseover and mouseout events are also triggered when the mouse pointer passes through the child element of the selected element. During event binding, unexpected bugs may occur due to the mouseover mouseout event.

Mouseover and mouseenter

The mouseover event is triggered regardless of whether the mouse pointer passes through the selected element or its child element.

The mouseenter event is triggered only when the mouse pointer passes through the selected element.

Mouseout and mouseleave

The mouseout event is triggered no matter the mouse pointer leaves the selected element or any child element.

The mouseleave event is triggered only when the mouse pointer leaves the selected element.