jquery中mouseover和mouseenter的区别

jquery中mouseover和mouseenter的区别

一、总结

一句话总结：

见名知意：enter（进入）和over（在上方）的意思好好思考一下

mouseover就是从子元素回到自己的时候也会触发

mouseover：当鼠标指针位于元素上方时，会发生 mouseover 事件。

mouseenter:当鼠标指针穿过元素时，会发生 mouseenter 事件。

从这里的一个小插曲上，我们应该可以看出，mouseenter是穿过，所以只能触发一次改事件，而mouseover是位于上方，

可以想下，如果给div设定了一个mouseover事件，其子孙后代都可以响应改事件，so...一旦鼠标从父级进入自己也会触发这个效果，当从子集回到父级也会触发这种效果。

所以，你可以这么理解：mouseenter事件只作用于目标元素，而mouseover最用于目标元素及其后代元素。

1、mouseover事件、mouseout事件、mouseenter事件、mouseleave事件的配合关系如何？

mouseover事件配合mouseout事件，而mouseenter配合mouseleave事件

二、JQ中mouseover和mouseenter的区别

转自或参考：JQ中mouseover和mouseenter的区别
https://www.cnblogs.com/wymbk/p/5711715.html

 　在对于刚开始学习JQ的初学者来说，mouseover事件和mouseenter事件总是傻傻分不清楚，毕竟刚开始学习的时候，需求没那么详细，毕竟俩事件的大致意思都一样

---就是鼠标移上去，就执行该事件的自定义函数。其实我们自己去看下他们的概念，我想你应该可以从中发现区别于不同：

　　　　mouseover：当鼠标指针位于元素上方时，会发生 mouseover 事件。

　　　　mouseenter:当鼠标指针穿过元素时，会发生 mouseenter 事件。

　　从这里的一个小插曲上，我们应该可以看出，mouseenter是穿过，所以只能触发一次改事件，而mouseover是位于上方，

可以想下，如果给div设定了一个mouseover事件，其子孙后代都可以响应改事件，so...一旦鼠标从父级进入自己也会触发这个效果，当从子集回到父级也会触发这种效果。

所以，你可以这么理解：mouseenter事件只作用于目标元素，而mouseover最用于目标元素及其后代元素。

　　如果还没明白，DOM案例如下：

　　JS代码：

$(document).ready(function(){
  $("div.over").mouseover(function(){
    $(".over span").text(x+=1);
  });
  $("div.enter").mouseenter(function(){
    $(".enter span").text(y+=1);
  });
});

　　HTML代码：

<div class="over" style="background-color:lightgray;padding:20px;40%;float:left">
<h2 style="background-color:white;">被触发的 Mouseover 事件：<span></span></h2>
</div>
<div class="enter" style="background-color:lightgray;padding:20px;40%;float:right">
<h2 style="background-color:white;">被触发的 Mouseenter 事件：<span></span></h2>
</div>

效果图：

　

　　另外，相对于配合鼠标离开事件离开，mouseover事件配合mouseout事件，而mouseenter配合mouseleave事件。那么mouseout和mouseleave的区别，其实跟mouseover和mouseleave恰恰相反。　

　　　　mouseout：当鼠标指针离开元素上方时，会发生 mouseover 事件一般与mouseover配合使用。

　　　　mouseleave:当鼠标指针离开元素时，会发生 mouseenter 事件一般与mouseenter配合使用。

　　mouseout是当离开目标元素或进入后代元素的时候，后代元素离开并进入目标元素或者完全离开的时候，都会触发mouseout事件，而mouseleave是当鼠标离开目标元素的时候，于后代无关。

　　原谅我的懒惰，图和HTML代码参考上图，

　　JS代码如下:

$(document).ready(function(){
  $("div.over").mouseover(function(){
    $(".over span").text(x+=1);
  });
  $("div.over").mouseout(function(){
    $(".over span").text(x+=1);
  });
  $("div.enter").mouseenter(function(){
    $(".enter span").text(y+=1);
  });
  $("div.enter").mouseleave(function(){
    $(".enter span").text(y+=1);
  });
});

　　效果是当鼠标进入左边的元素时并出来，且完成一套动作，此时执行的是(mouseover+mouseout)事件，输出的是6(3+3)，而进入右边的元素，且完成一套动作时，此时执行的是(mouseenter+mouseleave)事件，输出的是2(1+1).

　　看完必须明白了吧    b(￣▽￣)d