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，因为确实进入了子元素。