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代码:
<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的区别的更多相关文章
- jquery中mouseover和mouseenter的区别
jquery中mouseover和mouseenter的区别 一.总结 一句话总结: 见名知意:enter(进入)和over(在上方)的意思好好思考一下 mouseover就是从子元素回到自己的时候也 ...
- mouseover和mouseenter的区别
mouseover和mouseenter都是鼠标事件. mouseover事件,当鼠标穿过被选元素的时候,若此元素有子元素,子元素也会被触发此事件.即是使用mouseover事件,会多次触发此元素. ...
- JQuery中的mouseover和mouseenter的区别
mouseover和mouseout是一对:mouseenter和mouseleave是一对. 相同点:都是鼠标经过就触发事件 不同点: 给外盒子一个经过触发事件,但是mouseover会在鼠标经过外 ...
- jQuery mouseover与mouseenter的区别
在我们的页面中经常会用到mouseover与mouseout事件来给页面添加更好的渲染效果,但如果触发mouseover事件的元素有子元素的话,会造成闪烁的效果,看着很不舒服,这是因为mouseove ...
- jQuery关于mouseover和mouseenter的区别
原生的mouseenter是dom3级的事件,对于jQuery等一些框架已经实现了这个事件.但是它到底跟mouseover有什么区别? jQuery在实现这两个事件的时候,mouseover支持事件冒 ...
- mouseover与mouseenter的区别
mouseenter事件在鼠标进入某个元素,或第一次进入这个元素的某个子元素时触发.一旦触发后,在mouseleave之前,鼠标在这个元素的子元素上触发mouseenter事件都不会触发这个元素的mo ...
- 【转】mouseover和mouseenter的区别
一.当绑定着两个事件的元素里面没有子元素的时候,这两个事件的触发效果是一致的: x=0; y=0; $(document).ready(function(){ $("div.over&quo ...
- JQ中get()与eq()的区别
.eq() : 减少匹配元素的集合,根据index索引值,精确指定索引对象. .get() : 通过检索匹配jQuery对象得到对应的DOM元素. 同样是返回元素,那么eq与get有什么区别呢? eq ...
- 简述jq中attr()和prop()的区别
attr,prop都是属性的意思,那他们有什么区别呢?我们先来看一下jquery的部分源码: attr部分: attr: function( elem, name, value, pass ) { v ...
随机推荐
- Java学习笔记16--异常
异常 异常是导致程序中断运行的一种指令流,如果不对异常进行正确的处理,则可能导致程序的中断执行,造成不必要的损失, 所以在程序的设计中必须要考虑各种异常的发生,并正确的做好相应的处理,这样才能保证程序 ...
- socket方法
// 创建一个Socket实例var socket = new WebSocket('ws://192.168.2.72:8430'); // 打开Socket socket.onopen = fun ...
- 谷歌身份验证器加强Linux帐户安全
下载 Google的身份验证模块 # wget https://google-authenticator.googlecode.com/files/libpam-google-authenticato ...
- 【Java学习笔记】<集合框架>TreeSet,Comparable,Comparator
public class Person implements Comparable{ private String name; private int age; public Person(){ su ...
- PAT
PAT将每个全局IP地址的可用端口号分为3个部分0~511,512~1023,1023~65535.当PAT从地址池中获取地址时,首先维持源端口不变.如果不可能,它再从池中起始部分搜索可用的端口,如果 ...
- HTTP学习笔记(2)HTTP报文
1,什么是http报文? 上一节我们了解到数据在浏览器和服务器之间进程传送,这些数据被称为报文流,报文流有流入流出之分,当然在也有上游和下游,这些都是来确定报文的流向. 报文的流向都是向下,而不会回流 ...
- fgetc和fputc函数
1.输入函数 以下三个函数可用于一次读一个字符. #include <stdio.h> int getc( FILE *fp ); int fgetc( FILE *fp ); int g ...
- Checked ==true ? "Y":"N" ;
string overtime_mk= ((CheckBox)WebDataGrid1.Items[i].FindControl("CheckBox1")).Checked ==t ...
- Registered Nurse in the US
注册护士移民美国的条件 美国护士RN考试介绍 美国注册护士考试复习 美国各州注册护士考试要求 CGFNS Registered nurse Top Paid Registered Nurses
- 从0开始学Swift笔记整理(四)
这是跟在上一篇博文后续内容: --重写方法 重写实例方法 在子类中重写从父类继承来的实例方法和静态方法.先介绍实例方法的重写. 下面看一个示例: class Person { var n ...