mouseover 和 mouseenter 的区别

• mouseover：当鼠标移入元素或其子元素都会触发事件，所以有一个重复触发，冒泡的过 程。对应的移除事件是 mouseout 。
• mouseenter：当鼠标移除元素本身（不包含元素的子元素）会触发事件，也就是不会冒泡，对应的移除事件是 mouseleave

<div style="background:gray;" 
     onmouseover="mouse('over')" 
     onmouseout="mouse('out')" 
     onmouseenter="mouse('enter')"  
     onmouseleave="mouse('leave')" >
   <div style="background:red;"></div>
</div>

function mouse(msg){
  console.log(msg)
}

如上图所示，鼠标移入灰色区域，会触发mouseover、mouseenter,
鼠标从灰色区域移入红色区域时，还会触发mouseover一次。