JS事件mouseover ,mouseout ,mouseenter,mouseleave的区别

好久没有更新文章了，年底事情比较多 （别找借口了，其实就是懒...） ，跟大伙说声抱歉哈~ （不用道歉，也没什么人看的） 。马上就要大年三十了，大家都陆陆续续肥家过年了，然鹅，我还在公司苦逼地留守阵地，真是哔了狗了……

言归正传，还是继续咱们的学术研究吧~

---

在原生JS中鼠标移入移出事件有四个，分别为 mouseover ,mouseout ,mouseenter,mouseleave ，其中 mouseover 和 mouseenter 为移入事件， mouseout 和 mouseleave 为移出事件，那么问题来了，这每组事件之间究竟有什么区别呢？

可能很多人现在都还不知道它们之间的区别，甚至以为它们其实功能是一样一样的，真是too young too simple！

一、mouseover和mouseenter

mouseover : 只要鼠标指针移入事件所绑定的元素或其子元素，都会触发该事件
mouseenter : 只有鼠标指针移入事件所绑定的元素时，才会触发该事件

换句话说就是，如果一个元素 没有子元素 ，那么该元素绑定 mouseover 或者 mouseenter 两种事件效果没有区别，鼠标每次移入元素时都只会触发一次事件；如果绑定了 mouseover 事件的元素 存在子元素 ，那么，每次移入该元素时都会触发一次事件（包括从 外部移入 和从 子元素移入 ），移入子元素时也会触发一次事件。

举个简单例子~

<div class="box over" onmouseover="over()">
  <span>over</span>
</div>

<div class="box enter" onmouseenter="enter()">
  <span>enter</span>
</div>

// mouseover事件
function over() {
  console.log('触发了mouseover事件！');
}

// mouseenter事件
function enter() {
  console.log('触发了mouseenter事件！');
}

测试效果如下图所示：

二、mouseout和mouseleave

这两者对比原理与 mouseover 和 mouseenter 是一致的，如果上面理解了，那么这个也就理解了。

mouseout : 只要鼠标指针移出事件所绑定的元素或其子元素，都会触发该事件
mouseleave : 只有鼠标指针移出事件所绑定的元素时，才会触发该事件

换句话说就是，如果一个元素 没有子元素 ，那么该元素绑定 mouseout 或者 mouseleave 两种事件效果没有区别，鼠标每次移出元素时都只会触发一次事件；如果绑定了 mouseout 事件的元素 存在子元素 ，那么，每次移出该元素时都会触发一次事件（包括 移出至外部 和 移出至子元素 ），从子元素移出时也会触发一次事件。

举个简单例子~

<div class="box out" onmouseout="out()">
  <span>out</span>
</div>

<div class="box leave" onmouseleave="leave()">
  <span>leave</span>
</div>

// mouseout事件
function out() {
  console.log('触发了mouseout事件！');
}

// mouseleave事件
function leave() {
  console.log('触发了mouseleave事件！');
}

测试效果如下图所示：

通过以上图文详解，相信你已经能清楚这些事件之间的区别了吧！如果你看完还是有疑问的话，请戳→ 此处 ←亲身体验吧~

---

重点总结

① 只要鼠标指针移入（或移出）事件所绑定的元素或其子元素，都会触发 mouseover （或 mouseout ）事件
② 只有鼠标指针移入（或移出）事件所绑定的元素时，才会触发 mouseenter （或 mouseleave ）事件

最后，祝大家新春愉快！