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;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
jquery中mouseover和mouseenter的区别的更多相关文章
- JQ中mouseover和mouseenter的区别
我最近也在学习JQuery,所以最近对JQ中的一些小问题进行总结,方便学习. 在对于刚开始学习JQ的初学者来说,mouseover事件和mouseenter事件总是傻傻分不清楚,毕竟刚开始学习的时候, ...
- jQuery关于mouseover和mouseenter的区别
原生的mouseenter是dom3级的事件,对于jQuery等一些框架已经实现了这个事件.但是它到底跟mouseover有什么区别? jQuery在实现这两个事件的时候,mouseover支持事件冒 ...
- 【jQuery】【转】jQuery中的trigger和triggerHandler区别
trigger(event, [data]) 在每一个匹配的元素上触发某类事件. 这个函数也会导致浏览器同名的默认行为的执行.比如,如果用trigger()触发一个'submit',则同样会导致浏览器 ...
- jquery中attr和prop的区别、 什么时候用 attr 什么时候用 prop (转自 芈老头 )
jquery中attr和prop的区别. 什么时候用 attr 什么时候用 prop 在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这 ...
- JQuery中的html(),text(),val()区别
jQuery中.html()用为读取和修改元素的HTML标签,.text()用来读取或修改元素的纯文本内容,.val()用来读取或修改表单元素的value值. 1.HTML html():取得第一个匹 ...
- jQuery中.attr()和.prop()的区别
之前学习jQuery的时候,学习到了两种取得标签的属性值的方法:一种是elemJobj.attr(),另一种是elemJobj.prop().而在学习JS的时候,只有一种方法elemObj.getAt ...
- jquery中attr和prop的区别(转)
在网络上看到这样一篇关于jquery中attr和prop的区别文章,觉得不错,所以转载了. 在jQuery 1.6中,.attr()方法查询那些没有设置的属性,则会返回一个undefined.如果你要 ...
- Jquery中的 height(), innerHeight() outerHeight()区别
jQuery中的 height innerHeight outerHeight区别 标准浏览器下: height:高度 innerHeight:高度+补白 outerHeight:高度+补白+边框,参 ...
- 基于jquery中children()与find()的区别介绍
本篇文章介绍了,基于jquery中children()与find()的区别,需要的朋友参考下 .children(selector) 方法是返回匹配元素集合中每个元素的所有子元素(仅儿子辈).参数可选 ...
随机推荐
- 重拾MVC——第二天:Vue学习与即时密码格式验证
今天是复习MVC的第二天,准备自己写一个后台管理,然后慢慢写大,做全. 个人感觉做 Web 的,前端知识是必备的,所有今天学习了一下 Vue,很多人用这个,我以前没有用过,今天把它补起来. 比较了各个 ...
- eureka解析hostname为localhost问题 (转)
https://blog.csdn.net/liufei198613/article/details/79583686 公司的springcloud已经上线运行,但是最近测试环境老是会出现一个诡异的问 ...
- 如何使用JDBC连接数据库
1 JDBC:java database connectivity,是java程序与数据库系统通信的标准api 2 下载mysql JDBC驱动,解压缩找到mysql-connector-java-5 ...
- K2 BPM_曾经我也是996的一员_全球领先的工作流引擎
最近关于996的工作模式掀起了新一波讨论热潮.事情源于有人在知名代码托管平台GitHub上,发起了一个名为“996.ICU”的项目,意为“工作996,生病ICU”,以抵制互联网公司的996工作制,项目 ...
- DA_03_linux网络配置及其远程连接
一: 修改Linux的基本配置 直接运行:setup,根据提示修改 1.修改主机名:vi /etc/sysconfig/network NETWORKING=yes HOSTNAME=shizhan1 ...
- 数据库底层索引为什么用B树
注意B-树就是B树,-只是一个符号. 简介 B/B+树是为了磁盘或其它存储设备而设计的一种平衡多路查找树(相对于二叉,B树每个内节点有多个分支),与红黑树相比,在相同的的节点的情况下,一颗B/B+树的 ...
- Python数据库连接池 -组件 DBUtils
DBUtils是Python的一个用于实现数据库连接池的模块 此连接池有两种连接模式: DBUtils提供两种外部接口: PersistentDB :提供线程专用的数据库连接,并自动管理连接. Poo ...
- ThreadPoolExecutor源码分析二
接上文,这里继续分析源码 private static final int COUNT_BITS = Integer.SIZE - 3; private static final int CAPA ...
- Nginx之什么是反向代理(一)
什么是反向代理? 反向代理(Reverse Proxy)方式是指以代理服务器来接受internet上的连接请求,然后将请求转发给内部网络上的服务器,并将从服务器上得到的结果返回给internet上请求 ...
- Elasticsearch:运用scroll接口对大量数据实现更好的分页
在Elasticsearch中,我们可以通过size和from来对我们的结果来进行分页.但是对于数据量很大的索引,这是有效的吗?Scroll API可用于从单个搜索请求中检索大量结果(甚至所有结果), ...