前言
我们都知道js提供了鼠标事件，而鼠标事件中包含了两对事件，即mouseover和mouseout以及mouseenter和mouseleave这两对事件，如果只是单纯的读红宝书上的文字可能体会不到他们的差别，现在我们就用实例来证明一下这个两组事件的差别。
定义
mouseenter
在鼠标光标从元素外部首次移动到元素范围之内时触发，这个事件不冒泡。
mouseleave
在位于元素上方的鼠标光标移动到元素范围之外时触发，这个事件不冒泡。
mouseover
在鼠标指针位于一个元素外部，然后用户将其首次移入另一个元素边界之内时触发。
mouseout
在鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发。又移入的另一个元素可能位于前一个元素的外部，也可能是该元素的子元素。
实例
先放上整段代码，可以参考一下：
<body>
<div id="parentDiv" style="background-color:aquamarine;width:200px;height:200px;">父元素
<div id="childDiv" style="background-color:pink;width:100px;height:100px;margin: 0 auto;">子元素</div>
</div>
<p></p>
<p></p>
<p></p>
<p></p>
<script>
//测试鼠标点击事件
let parentDiv = document.getElementById('parentDiv')
let mouseenterCount = 0;
let mouseleaveCount = 0;
let mouseoverCount = 0;
let mouseoutCount = 0;
parentDiv.addEventListener('mouseenter',function(){
let showText = document.getElementsByTagName('p')[0];
mouseenterCount++;
showText.innerText = "鼠标enter的次数为" + mouseenterCount;
})
parentDiv.addEventListener('mouseleave',function(){
let showText = document.getElementsByTagName('p')[1];
mouseleaveCount++;
showText.innerText = "鼠标leave的次数为" + mouseleaveCount;
})
parentDiv.addEventListener('mouseover',function(){
let showText = document.getElementsByTagName('p')[2];
mouseoverCount++;
showText.innerText = "鼠标over的次数为" + mouseoverCount;
})
parentDiv.addEventListener('mouseout',function(){
let showText = document.getElementsByTagName('p')[3];
mouseoutCount++;
showText.innerText = "鼠标out的次数为" + mouseoutCount;
})
</script>
</body> 操作的动图是这样的：（括号中数字是表示触发的次数）
- 第一步：鼠标进入父元素，同时触发mouseenter（1）和mouseover（1）
- 第二步：鼠标进入子元素，同时触发mouseover（2）和mouseout（1）
- 第三步：鼠标离开子元素，同时触发mouseout（2）和mouseover（3）
- 第四步：鼠标离开父元素，同时触发mouseout（3）和mouseleave（1）
总结
根据上面的操作，我们可以总结出以下结论：
- mouseenter和mouseleave只有离开该元素时才会触发，如果有子元素的话，鼠标移入子元素，还算是在该元素中，所以不会触发；
- mouseover和mouseout是只要有进入和离开就会出触发，无论是从父元素到子元素还是子元素到父元素，或者是只对父元素进行操作（换句话说，会触发mouseenter和mouseleave的时候一定会触发mouseover和mouseout）
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。