共计 1811 个字符，预计需要花费 5 分钟才能阅读完成。
前言
我们都知道 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）
