JQ中mouseover和mouseenter的区别

   我最近也在学习JQuery,所以最近对JQ中的一些小问题进行总结,方便学习。

  在对于刚开始学习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代码:

被触发的 Mouseover 事件:

被触发的 Mouseenter 事件:

效果图:

 JQ中mouseover和mouseenter的区别_第1张图片

  另外,相对于配合鼠标离开事件离开,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

你可能感兴趣的:(JQ中mouseover和mouseenter的区别)