鼠标移入和移出事件mouseenter VS mouseover 、mouseleave VS mouseout

我们在做业务的过程中，经常会遇到当鼠标hover某个元素时，就将隐藏的元素显示，当鼠标没有hover时，就隐藏对应的元素。

如果要显示的元素是hover元素的子元素，那么用css就可以解决，但是，如果遇到其他的情况，就需要监听hover元素的mouseenter、mouseover或者mouseleave、mouseout事件，那么它们到底有什么区别的？下面我们来一一展述。

一、相同点：

mouseenter和mouseover都是在鼠标从元素外边移入元素里面时触发。mouseleave和mouseout都是在鼠标从元素内部移出到元素外部时触发。

二、不同点：

1.是否冒泡

mouseenter和mouseleave是不冒泡的。而mouseover和mouseout都是冒泡的。

2.在子元素上是否有效

mouseenter和mouseleave的逻辑比较简单，只是针对hover元素，对元素里面的子元素无效，而mouseover和mouseout就要复杂的多。例如：

针对如下html

<div id="outer">
    <div id="center">
      <div id="inner"></div>
    </div>
</div>

相应的监听事件为：

document.getElementById("outer").addEventListener('mouseenter', function(){
    console.log("mouseenter")
},false)
document.getElementById("outer").addEventListener('mouseleave', function(){
    console.log("mouseleave")
},false)

当鼠标从outer外部移入outer内部时，如果鼠标进一步的移动到center上或者inner上，这个时候，是不会触发mouseleave事件或者mouseenter事件的。也就是说，mouseenter和mouseleave只是针对目标元素，无视其内部元素。

而当鼠标从outer外部移入outer内部时，如果鼠标进一步的移动到center上或者inner上，mouseover和mouseout就会频繁的被触发，原因是，如果鼠标进入了center或者inner，则浏览器会先触发针对outer元素的mouseout事件，进而触发针对center元素的mouseover事件。也就是说，mouseover和mouseout是对内部元素有效的。

综上所述，用mouseenter和mouseleave会简单点，逻辑上不会那么复杂。我们在做项目的过程中，可以优先使用这对事件。