mouseover 和 mouseenter

mouseover 经过自身盒子触发，经过子盒子也触发。

【mouseover会冒泡，鼠标从外部移入子元素或从父元素移入子元素，都会先触发子元素的mouseover再触发父元素的mouseover。】

mouseenter 只经过自身盒子触发，不冒泡。

mouseout 和 mouseleave

mouseout ：离开自身盒子触发自身的mouseout，进入子盒子也触发自身的mouseout。

【 mouseout冒泡，从子元素进入父元素时，即触发子元素的mouseout，也会触发父元素的mouseout。】

mouseleave：仅在自身盒子时被触发，不冒泡。

示例1

结论：对于同一个元素，鼠标移入后，会先触发mouseover，再触发mouseenter。

    <style>#parent {width: 200px;height: 200px;background-color: bisque;}</style><div id="parent"></div><script>var parent = document.getElementById("parent");parent.addEventListener("mouseenter", function (e) {console.log("===mouseenter parent===");});parent.addEventListener("mouseover", function (e) {console.log("===mouseover parent===");});</script>

示例2

结论：对于重叠的父子元素，mouseover会先触发子盒子再触发父盒子。mouseenter会先进入父盒子再进入子盒子。【字面理解：over：进入盒子上方，enter：“触碰”到盒子】

    <div id="parent"><div id="son"></div></div><script>var parent = document.getElementById("parent");var son = document.getElementById("son");parent.addEventListener("mouseover", function (e) {console.log("===mouseover parent===");});parent.addEventListener("mouseenter", function (e) {console.log("===mouseenter parent===");});son.addEventListener("mouseenter", function (e) {console.log("===mouseenter son===");});son.addEventListener("mouseover", function (e) {console.log("===mouseover son===");});</script>

示例3

结论：对于同一个元素来说，鼠标离开元素，先触发mouseout，再触发mouseleave。

   var parent = document.getElementById("parent");parent.addEventListener("mouseout", function (e) {console.log("===mouseout parent===");});parent.addEventListener("mouseleave", function (e) {console.log("===mouseleave parent===");});

示例4

结论：

    <div id="parent"><div id="son"></div></div><script>var parent = document.getElementById("parent");var son = document.getElementById("son");parent.addEventListener("mouseout", function (e) {console.log("===mouseout parent===");});parent.addEventListener("mouseleave", function (e) {console.log("===mouseleave parent===");});parent.addEventListener("mouseenter", function (e) {console.log("===mouseenter parent===");});parent.addEventListener("mouseover", function (e) {console.log("===mouseover parent===");});son.addEventListener("mouseout", function (e) {console.log("===mouseout son===");});son.addEventListener("mouseleave", function (e) {console.log("===mouseleave son===");});son.addEventListener("mouseenter", function (e) {console.log("===mouseenter son===");});son.addEventListener("mouseover", function (e) {console.log("===mouseover son===");});</script>

上图结论：mouseout会冒泡。从子元素进入父元素时，即触发子元素的mouseout，也会触发父元素的mouseout。然后触发子元素的mouseleave，触发父元素的mouseover。

上图结论：mouseover会冒泡。从父元素移入子元素，触发父的mouseout。触发子元素的mouseover接着冒泡触发父的mouseover。触发子元素的mouseenter，因为确实进入了子元素。