前言 我们都知道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）