我最近也在学习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代码:

<div class="over" style="background-color:lightgray;padding:20px;width:40%;float:left">
<h2 style="background-color:white;">被触发的 Mouseover 事件:<span></span></h2>
</div>
<div class="enter" style="background-color:lightgray;padding:20px;width: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

  

JQ中mouseover和mouseenter的区别的更多相关文章

  1. jquery中mouseover和mouseenter的区别

    jquery中mouseover和mouseenter的区别 一.总结 一句话总结: 见名知意:enter(进入)和over(在上方)的意思好好思考一下 mouseover就是从子元素回到自己的时候也 ...

  2. mouseover和mouseenter的区别

    mouseover和mouseenter都是鼠标事件. mouseover事件,当鼠标穿过被选元素的时候,若此元素有子元素,子元素也会被触发此事件.即是使用mouseover事件,会多次触发此元素. ...

  3. JQuery中的mouseover和mouseenter的区别

    mouseover和mouseout是一对:mouseenter和mouseleave是一对. 相同点:都是鼠标经过就触发事件 不同点: 给外盒子一个经过触发事件,但是mouseover会在鼠标经过外 ...

  4. jQuery mouseover与mouseenter的区别

    在我们的页面中经常会用到mouseover与mouseout事件来给页面添加更好的渲染效果,但如果触发mouseover事件的元素有子元素的话,会造成闪烁的效果,看着很不舒服,这是因为mouseove ...

  5. jQuery关于mouseover和mouseenter的区别

    原生的mouseenter是dom3级的事件,对于jQuery等一些框架已经实现了这个事件.但是它到底跟mouseover有什么区别? jQuery在实现这两个事件的时候,mouseover支持事件冒 ...

  6. mouseover与mouseenter的区别

    mouseenter事件在鼠标进入某个元素,或第一次进入这个元素的某个子元素时触发.一旦触发后,在mouseleave之前,鼠标在这个元素的子元素上触发mouseenter事件都不会触发这个元素的mo ...

  7. 【转】mouseover和mouseenter的区别

    一.当绑定着两个事件的元素里面没有子元素的时候,这两个事件的触发效果是一致的: x=0; y=0; $(document).ready(function(){ $("div.over&quo ...

  8. JQ中get()与eq()的区别

    .eq() : 减少匹配元素的集合,根据index索引值,精确指定索引对象. .get() : 通过检索匹配jQuery对象得到对应的DOM元素. 同样是返回元素,那么eq与get有什么区别呢? eq ...

  9. 简述jq中attr()和prop()的区别

    attr,prop都是属性的意思,那他们有什么区别呢?我们先来看一下jquery的部分源码: attr部分: attr: function( elem, name, value, pass ) { v ...

随机推荐

  1. 使用 BeanCopier 复制对象

    Cglib是一款比较底层的操作java字节码的框架. BeanCopier是一个工具类,可以用于Bean对象内容的复制. 复制Bean对象内容的方法有很多,比如自己手动get set ,或者使用Pro ...

  2. iOS10适配及Xcode8配置

    一.证书管理 用Xcode8打开工程后,比较明显的就是下图了,这个是苹果的新特性,可以帮助我们自动管理证书.建议大家勾选这个Automatically manage signing(Ps.但是在bea ...

  3. [Shell]正则表达式与通配符

    ----------------------------------------------------------------------------------------- 正则表达式与通配符: ...

  4. 【jQuery】: 定时刷新页面

    <%@page import="qflag.ucstar.seatmonitor.manager.SeatMonitorManager"%><%@ page la ...

  5. java获取系统信息

    public class SystemInfo { public static void main(String[] args) { //系统属性 Properties prop = System.g ...

  6. Hibernate使用count(*)取得表中记录总数

    /** * @TODO:查询某一年度的所有计划数量 */ public int findCountByYear(String currYear) { String hqlString = " ...

  7. windows下关闭80端口被system占用的情况

    用管理员运行cmd然后用net stop http 停止pid 为4的进程

  8. lvs主备可以自由切换,vip落在主上的时候,端口无法telnet,业务连接不了

    lvs主备可以自由切换,vip落在主上的时候,端口无法telnet,业务连接不了 解决:将主上的keepalived重启,故障解除 原因:不可知 lvs常见故障原因: real server上的脚步没 ...

  9. ubuntu wireshark 没有接口

    There are no interfaces on which a capture can be done 解决方法: Open a terminal by pressing Ctrl+Alt+T  ...

  10. MySQL中distinct和group by性能比较[转]

    MySQL中distinct和group by性能比较[转] 之前看了网上的一些测试,感觉不是很准确,今天亲自测试了一番.得出了结论(仅在个人计算机上测试,可能不全面,仅供参考) 测试过程: 准备一张 ...