JS之mouseover和mouseenter
mouseenter事件只会触发一次，触发对象是注册对象或者注册对象的子元素
mouseover事件可以触发多次，触发对象是注册对象或者注册对象的子元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。</p>
<p>只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。</p>
<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>
<script>
var x = 0,y = 0;
var div1 = document.getElementsByClassName("over")[0];
div1.addEventListener("mouseover",function(){
var span = this.getElementsByTagName("span")[0]
span.innerText = (x +=1);
span.style.cssText = "border:2px red solid;";
},false);
var div2 = document.getElementsByClassName("enter")[0];
div2.addEventListener("mouseenter",function(){
var span = this.getElementsByTagName("span")[0]
span.innerText = (y +=1);
span.style.cssText = "border:2px red solid;";
},false);
</script>
</body>
</html>
JS之mouseover和mouseenter的更多相关文章
- jquery的hover mouseover mouseout mouseenter mouseleave的区别
jquery的hover mouseover mouseout mouseenter mouseleave的区别 1.mouseover mouseout mouseover - 鼠标指针经过任何子元 ...
- jquery中mouseover和mouseenter的区别
jquery中mouseover和mouseenter的区别 一.总结 一句话总结: 见名知意:enter(进入)和over(在上方)的意思好好思考一下 mouseover就是从子元素回到自己的时候也 ...
- 事件处理& 事件委托& 区别mouseover与mouseenter
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jQuery里的mouseover与mouseenter事件类型区别
JQ里面有mouseover和mouseenter 2个事件类型干着差不多的活,用不好经常出现些小问题. 今天我解释一下原理: 事件类型翻译: mouseover 鼠标移上 mouseenter 鼠 ...
- The different of mouseover and mouseenter
l论事件onmouseover 和 onmouseenter:同类比较onmouseout 和 onmouseleave; 使用onmouseover时,鼠标除了被设置事件的元素,还会触发其子元素: ...
- mouseover和mouseenter的区别
mouseover和mouseenter都是鼠标事件. mouseover事件,当鼠标穿过被选元素的时候,若此元素有子元素,子元素也会被触发此事件.即是使用mouseover事件,会多次触发此元素. ...
- mouseover,mouseout,mouseenter,mouseleave的区别
1.前言 今天下午参加一个面试,对方问我写不写博客,这时候才猛然意识到好久没写东西了.最近一直在外边实习,每天有很多经历和挑战,但是却没有及时地记录下来,这一点必须得批评自己,以后得经常把自己遇到的问 ...
- jQuery mouseover与mouseenter,mouseout与mouseleave的区别
mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件. mouseou ...
- 关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
轮播中大多会选择mouseover和mouseout 这个时候是没有任何问题的 但当遇到有css3动画的时候,会发现移入移出过快 动画还没加载完成就需要执行下一个动画,完了动画样式就错乱了. 这时候 ...
随机推荐
- [Cocos2d-x For WP8]Transition 场景切换
在游戏中通常会打完了一关之后就会从当前的场景转换到另外一关的场景了,在Cocos2d-x中是由CCScene类表示一个场景.那么场景(CCScene)是为游戏中的精灵(CCSprite)提供了舞台,场 ...
- 【BZOJ】1600: [Usaco2008 Oct]建造栅栏（dp）
http://www.lydsy.com/JudgeOnline/problem.php?id=1600 说好的今天开始刷水.. 本题一开始我以为是排列组合,但是自己弱想不出来,只想到了如果四边有一条 ...
- MyEclipse设置注释格式(转载)
Window --> Java --> Code Style --> Code Templates --> Comments --> types --> Edit ...
- CSS HTML链接去掉小手与增添小手
style="cursor: hand" crosshair:精确定位“十”字形: text:文本“I”形: wait:等待,“沙漏”形: default:默认指针: help:帮 ...
- 用AE如何制作如下三个loading动效，
在本期象牙绘UED团队分享当中,我们将详细演示用AE如何制作如下三个loading动效, 其中涉及到AE表达式的应用.值曲线调整.速度曲线编辑等知识. 对于初学者来说可能信息量略大,希望通过是视频教程 ...
- Linux邮件服务器架构
// 上面的过程只是实现了简单的本地用户的文件发送功能,只需要安装mailutil,不需要安装配置sendmail,看鸟哥的Linux私房菜中写的应该是本地用户发送邮件不需要sendmail.只有当非 ...
- 如何设置NBU的Backup, Archive and Restore
第一行表示Master Server 第二行猜测表示当前主机 第三行不清楚 总结: 1. 这里压根就没有Media Server的事, Media Server对整个备份系统来说是透明的. 2. ...
- 浅谈RAID写惩罚（Write Penalty）与IOPS计算
介绍 通常在讨论不同RAID保护类型的性能的时候,结论都会是RAID-1提供比较好的读写性能,RAID-5读性能不错,但是写入性能就不如RAID-1,RAID-6保护级别更高,但写性能相对更加差,RA ...
- Web 在线文件管理器学习笔记与总结（2）显示文件列表（名称，类型，大小，可读，可写，可执行，创建时间，修改时间，访问时间）
主要函数: filetype() 判断文件类型 filesize() 得到文件大小(字节) is_readable() 判断文件是否可读 is_writeable() 判断文件是否可写 is_exec ...
- Google Chrome can not be run as root
Ubuntu运行Chrome出现"Google Chrome can not be run as root"的解决方法 编辑启动文件:/opt/google/chrome/goog ...