JS鼠标事件mouseout与mouseleave以及mouseover与mousemove区别

JS鼠标事件mouseout与mouseleave以及mouseover与mousemove区别

mouseout:

1. mouseout是由子元素冒泡而来
2. 鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发，又移入到的另一个元素可能位于前一个元素的外部，也可能是这个元素的子元素。简而言之，mouseout是只要鼠标指针离开了目标元素或者目标元素的所有子元素中的任何一个就会被触发，即使鼠标指针还在目标元素内。也就是离开子元素后，mouseout事件会冒泡到父元素上。直到取消了冒泡或者到达了最外层根元素，才会停止冒泡。

mouseleave：

1. mouseleave事件是各元素各自触发，不是由子元素冒泡而来
2. mouseleave是位于元素上方的鼠标移动到元素之外触发，鼠标移动到后代元素也不会触发。即当鼠标指针离开了目标元素以及目标元素的所有子元素以后才会触发。

mouseover：

1. mouseover是由子元素冒泡而来
2. mouseover事件是鼠标位于一个元素外部，然后首次移入到另一个元素时触发，又移入的另一个元素可能位于前一个元素的外部，也可能是这个元素的子元素

mousemove：

1. 鼠标指针在元素内部移动时重复触发

如下所示。简单设置2个div，div2是div1的子元素。

<script>
let  div1=document.createElement("div");
 div1= menuCreate.createDiv("div",{
      width:"100px",
      height:"100px",
      backgroundColor:"red"
  });
  div1.addEventListener("mouseover",mouseHandler);
  div1.addEventListener("mouseout",mouseHandler);
  div1.addEventListener("mouseleave",mouseHandler);
  let div2=document.createElement("div");
  div2= menuCreate.createDiv("div",{
      width:"50px",
      height:"50px",
      backgroundColor:"green"
  });
 div1.appendChild(div2);
  document.body.appendChild(div1);
    function mouseHandler(e) {
       console.log(e.type)
    }## 标题
</script>

鼠标从div1到div2再最后离开先后触发mouseover-mousemove（多次触发）-mouseout-mouseover-mousemove（多次触发）-mouseout-mouseleave```
结果如下