mouseover/mouseout 和 mouseenter/mouseleave 的区别

Question

mouseover/mouseout 和 mouseenter/mouseleave 都是鼠标事件，但它们的触发方式和效果略有不同。

mouseover/mouseout

触发方式：当鼠标指针从元素外部移入到元素内部时，会触发 mouseover 事件；当鼠标指针从元素内部移出到元素外部时，会触发 mouseout 事件。
效果：mouseover/mouseout 可以被嵌套，当鼠标指针从一个元素移入到另一个元素时，会触发多个事件。同时，当鼠标指针经过一个元素的子元素时，也会触发事件。

mouseenter/mouseleave

触发方式：当鼠标指针从元素外部移入到元素内部时，会触发 mouseenter 事件；当鼠标指针从元素内部移出到元素外部时，会触发 mouseleave 事件。
效果：mouseenter/mouseleave 只会在鼠标指针进出元素边界时触发一次，不会受嵌套影响。

因此，mouseover/mouseout 更适合用于需要考虑嵌套元素的情况，而mouseenter/mouseleave 更适合用于需要精确控制事件触发次数的情况。