mouseover 和 mouseenter

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===");
      }