mouseovermouseout和mouseentermouseleave

Posted 2020-08-29 Fogwind

这里直接把《javascript 高级程序设计（第三版）》中的解释贴出来：

1. mouseover：在鼠标指针位于一个元素外部，然后用户将其首次移入另一个元素边界之内时触发。不能通过键盘触发这个事件。
2. mouseout：在鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发。又移入的另一个元素可能位于前一个元素的外部，也可能是这个元素的子元素。不能通过键盘触发这个事件。
3. mouseenter：在鼠标光标从元素外部首次移动到元素范围之内时触发。这个事件不冒泡，而且在光标移动到后代元素上时不会触发。
4. mouseleave：在位于元素上方的鼠标光标移动到元素范围之外时触发。这个事件不冒泡，而且在光标移动到后代元素上时不会触发。

由于mouseover和mouseout事件会冒泡，所以如果为一个元素添加了这两个事件，那么在该元素的后代元素上切换时会重复触发该元素的这两个事件（在项目中要注意）。如果在后代元素上阻止事件冒泡，那么鼠标指针移到后代元素上，相当于触发了该元素（祖先元素）的mouseout事件。

而mouseenter和mouseleave没有此行为。

注意：IE8及以下版本不支持DOM2级添加事件的方法。

例子：点我看在线演示（在控制台中查看）

<style type="text/css">
   html,body{
      height:100%;
   }
   body{
      padding:100px;
   }
   div{
      margin:auto;
   }
   #div1,#div4{
      width:400px;
      height:300px;
      background-color: red;
   }
   #div4{
      margin-top: 50px;
      background-color: #2a3e5d;
   }
   #div2,#div5{
      width:300px;
      height:250px;
      background-color: black;
   }
   #div3,#div6{
      width:200px;
      height:150px;
      background-color: gold;
   }
</style>

<div id="div1">
   <div id="div2">
      <div id="div3"></div>
   </div>
   div1
</div>
<div id="div4">
   <div id="div5">
      <div id="div6"></div>
   </div>
   div4
</div>
<script type="text/javascript" >
(function(){
   function get(id){
      return document.getElementById(id);
   }
   var div1 = get(‘div1‘), div2 = get(‘div2‘), div3 = get(‘div3‘);
   div1.count = 0;
   div1.addEventListener(‘mouseenter‘, function() {
      this.style.backgroundColor = "pink";
      div1.count++;
      console.log(‘div1.count: ‘+div1.count);
   }, false);
   div1.addEventListener(‘mouseleave‘, function() {
      this.style.backgroundColor = "green";
      div1.count--;
      console.log(‘div1.count: ‘+div1.count);
   }, false);
   
   var div4 = get(‘div4‘), div5 = get(‘div5‘), div6 = get(‘div6‘);
   div4.count = 0;
   div4.addEventListener(‘mouseover‘, function() {
      this.style.backgroundColor = "blue";
      div4.count++;
      console.log(‘div4.count: ‘+div4.count);
   }, false);
   div4.addEventListener(‘mouseout‘, function() {
      this.style.backgroundColor = "gray";
      div4.count--;
      console.log(‘div4.count: ‘+div4.count);
   }, false);
})();
</script>