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

jQuery在实现这两个事件的时候,mouseover支持事件冒泡,在父级注册事件,子元素也会触发此事件。而mouseenter只有鼠标划到注册事件的元素才会触发。

看个例子:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
x=0;
y=0;
$(document).ready(function(){
$("div.over").mouseover(function(){
$(".over span").text(x+=1);
});
$("div.enter").mouseenter(function(){
$(".enter span").text(y+=1);
});
});
</script>
<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>

  

jQuery关于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事件来给页面添加更好的渲染效果,但如果触发mouseover事件的元素有子元素的话,会造成闪烁的效果,看着很不舒服,这是因为mouseove ...

  4. JQuery中的mouseover和mouseenter的区别

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

  5. JQ中mouseover和mouseenter的区别

    我最近也在学习JQuery,所以最近对JQ中的一些小问题进行总结,方便学习. 在对于刚开始学习JQ的初学者来说,mouseover事件和mouseenter事件总是傻傻分不清楚,毕竟刚开始学习的时候, ...

  6. mouseover与mouseenter的区别

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

  7. 【转】mouseover和mouseenter的区别

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

  8. The different of mouseover and mouseenter

    l论事件onmouseover 和 onmouseenter:同类比较onmouseout 和 onmouseleave; 使用onmouseover时,鼠标除了被设置事件的元素,还会触发其子元素: ...

  9. jquery的hover mouseover mouseout mouseenter mouseleave的区别

    jquery的hover mouseover mouseout mouseenter mouseleave的区别 1.mouseover mouseout mouseover - 鼠标指针经过任何子元 ...

随机推荐

  1. 随机函数(Pascal入门)

    随机函数是最主要的,在比赛的时候我们能够用随机函数来測试自己的程序是否会超时. 随机函数也能够做出一些大数据.用于两个程序之间对拍(一个是爆搜.一个是正解). 当然平时我们也能够用随机函数測自己的程序 ...

  2. Chord算法实现具体

    背景 Chord算法是DHT(Distributed Hash Table)的一种经典实现.下面从网上无节操盗了一段介绍性文字: Chord是最简单.最精确的环形P2P模型."Chord&q ...

  3. 反对网抄,没有规则可以创建目标"install" 靠谱解答

    在ubuntu下遇到这个问题,原因其实很简单,你不能用WINDWOS下的方法用图形方式打开,然后点了一下按扭"解压缩",生成了一个文件夹. 的确,这个文件夹看起来和正常的没有什么区 ...

  4. mysql(5.7)在CentOs7下的安装、配置与应用

    和之前版本的mysql有一些不同,现把完整过程记下来,或许对新手来说有用. 本文描述的安装是采用通用的二进制压缩包(linux - Generic)以解压方式安装,相当于绿色安装了.   一.下载通用 ...

  5. 3GP文件格式研究

    需要看的文档 http://www.3gpp.org/ftp/Specs/archive/26_series/ 3GPP TS 26.233 3GPP TS 26.243 3GPP TS 26.244 ...

  6. 一些实用的CSS Media Query代码片段,个人采集

    CSS3的出现让响应式Web设计变得简单,CSS3提供了强大的media queries,允许你针对不同的条件设置不同的样式,可以在不修改页面内容的情况下,为不同设备提供不同的样式效果. 以下是一些C ...

  7. toj4119HDFS

    In HDFS( Hadoop Distributed File System), each data may have a lot of copies in case of data lose. T ...

  8. error LNK2019: 无法解析的外部符号 "public:

    错误 1 error LNK2019: 无法解析的外部符号 "public: __thiscall test::test(void)" (??0test@@QAE@XZ),该符号在 ...

  9. 如何使用NODEJS+REDIS开发一个消息队列

    作者: RobanLee 原创文章,转载请注明: 萝卜李 http://www.robanlee.com MQ全称为Message Queue, 消息队列(MQ)是一种应用程序对应用程序的通信方法.应 ...

  10. [Non-original]OS X How do I unset an IP address set with ifconfig?

    I recently used ifconfig en1 1.2.3.4 to set the IP address of a network interface (specifically, the ...