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动画的时候,会发现移入移出过快 动画还没加载完成就需要执行下一个动画,完了动画样式就错乱了. 这时候 ...
随机推荐
- xamarin studio And linq 查询方式分析
在 Windows 操作系统可以正常读取网络上的 https 数据流,在 Linux 操作系统中会失败:http://www.cnblogs.com/skyivben/archive/2012/03/ ...
- Mysql_mysql force Index 强制索引
其他强制操作,优先操作如下: mysql常用的hint 对于经常使用oracle的朋友可能知道,oracle的hint功能种类很多,对于优化sql语句提供了很多方法.同样,在mysql里,也有类似的h ...
- C++ Get Current Time 获取当前时间
在做项目中,我们经常需要获取系统的当前时间,那么如何获取呢,参见下面的代码: /* asctime example */ #include <stdio.h> /* printf */ # ...
- windows渗透被人忽视的一些小命令
cmdkey /list 可以列出域内网之间可用的凭据. wmic useraccount get name,sid gpresult /r
- LeetCode | Unique Paths【摘】
A robot is located at the top-left corner of a m x n grid (marked ‘Start’ in the diagram below). The ...
- LiveUpdate Adminstrator配置手册
第一种模式: LUA 从Symantec官网LiveUpdate服务器下载更新. ．登陆LUA控制台 图1 ．添加Symantec Endpoint Protecton v11.0 图2 3. 查看源 ...
- activeform 配置
<?php $form = ActiveForm::begin([ 'action' => ['/admin/admin/adminadd'], 'id' => 'login-for ...
- 小组项目beta发布的评价
这次最看好飞天小女警组,相比上次他们的界面漂亮了很多,功能也相对完善,他们的礼物挑选系统非常有创意.如果去网上爬更多的数据,这个项目会更完美. 新蜂团队的俄罗斯方块游戏新增加了显示下一个方块以及游戏积 ...
- java.lang.NoSuchMethodException: org.apache.catalina.deploy.WebXml addServlet的解决方案
tomcat7启动后出现:java.lang.NoSuchMethodException: org.apache.catalina.deploy.WebXml addServlet这个问题. 并且访问 ...
- 批量清除BOM头
批量清除BOM头 (2012-03-05 13:28:30) 转载▼ 标签: 杂谈 有些php文件由于不小心保存成了含bom头的格式而导致出现一系列的问题.以下是批量清除bom头的代码,复制代码, ...