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动画的时候,会发现移入移出过快 动画还没加载完成就需要执行下一个动画,完了动画样式就错乱了. 这时候 ...
随机推荐
- pygame系列_原创百度随心听音乐播放器_完整版
程序名:PyMusic 解释:pygame+music 之前发布了自己写的小程序:百度随心听音乐播放器的一些效果图 你可以去到这里再次看看效果: pygame系列_百度随心听_完美的UI设计 这个程序 ...
- C# DateTime 日期加1天 减一天 加一月 减一月 等方法（转）
//今天 DateTime.Now.Date.ToShortDateString(); //昨天,就是今天的日期减一 DateTime.Now.AddDays(-1).ToShortDateStrin ...
- 解决 PermGen space Tomcat内存设置
转自:http://qwzhl100.blog.163.com/blog/static/2133124200932813148637/ 在 使用Java程序从数据库中查询大量的数据或是应用服务器(如t ...
- SQL Server 中 with tmp 临时表的用法
SQL Server 中 with tmp 临时表的用法 ----------with临时表用法,有时候采用临时表比采用in的效率更高,避免了全表扫描. 实例中实现了查询普通题.大题.子题目的sql ...
- JavaScript事件大全3
//无模式的提示框 //屏蔽按键 <html> <head> <meta http-equiv="Content-Type" content=& ...
- tableviewCell折叠状态3
// // LHQDelegateModel.h // 11 - 投资管理 - 李洪强 // // Created by vic fan on 16/4/13. // Copyright © ...
- C++ Get Current Time 获取当前时间
在做项目中,我们经常需要获取系统的当前时间,那么如何获取呢,参见下面的代码: /* asctime example */ #include <stdio.h> /* printf */ # ...
- 在Linux中安装SEP Client
1. 下载Symantec_Endpoint_Protection_12.1.5_Linux_Client_EN, 解压其中的sep-deb.zip 2. 若直接sudo ./install.sh ...
- 从网页上抓取Windows补丁信息然后整型输出（PowerShell）
$report = [pscustomobject]@{'Date' = $null; 'MSRC' = $null; 'KB' = $null; 'Severity' = $null; 'Versi ...
- 【液晶模块系列基础视频】3.1.fatfs文件系统的移植及接口函数的使用
============================== 技术论坛:http://www.eeschool.org 博客地址:http://xiaomagee.cnblogs.com 官方网店:h ...