Differences between mouseover, mouseout, mouseenter, and mouseleave

I believe that I have heard of "bubble events" for front-end development. The ninth chapter of "JavaScript advanced programming" describes in detail. However, when I am studying it, I have a thorough understanding, I didn't understand it in detail, so I recently encountered a problem in my work: There are many li tags and there are two buttons on the tags, the two buttons above are displayed only when the mouse is moved to li. For example, the default status is displayed on the left, the move button on the right, and the mouseover and mouseout buttons are used, as a result, when you move the cursor over the button, the button will flash.

Later, we compared the differences between mouseover, mouseout, mouseenter, and mouseleave, and found that when the mouse moves out, the mouseover and mouseout methods of its parent-level elements are triggered, while the mouseenter, mouseleave only triggers the method for moving the current mouse into and out of elements. In other words, the latter two are non-bubble events, and the former two are bubble events.

The experiment details are as follows:

    aaaaaaaaaaaaaaabbbbbbbbbb

The page is as follows:

Simple css code:

{:;:;:;}

The methods for parent and child mouseover, mouseout, mouseenter, and mouseleave are as follows:

'parentMouseOver''parentMouseOut''childMouseOver''childMouseOut''parentMouseEnter''parentMouseLeave''childMouseEnter''childMouseLeave'

Set two groups of bindings respectively:

1) mouseover and mouseout

"#parent").bind('mouseover'"#parent").bind('mouseout'"#child").bind('mouseover'"#child").bind('mouseout'

2) mouseenter, mouseleave

    $("#parent").bind('mouseenter'"#parent").bind('mouseleave'"#child").bind('mouseenter'"#child").bind('mouseleave', childMouseLeave);

The operation is to move the mouse from the left side of the parent and then from the right side.

The binding result is as follows:

1) group (the four red boxes are: Enter parent, from parent to child, from child to parent, and remove parent ):

2) group:

The experiment results clearly show the differences among mouseover, mouseout, mouseenter, and mouseleave.