javascript----mouseover和mouseenter的区别

Posted SunLike阿理旺旺

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript----mouseover和mouseenter的区别相关的知识,希望对你有一定的参考价值。

1、代码(mouseover)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.div1{
				width: 600px;
				height: 600px;
				background: red;
			}
			div{
				padding: 20px;
				
			}
			div div{
				background-color: white;
			}
			div div div{
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div class="div1" id = \'div1\'>
			<div>
				<div></div>
			</div>
			
		</div>
		<script>
			var div1 = document.getElementById("div1");
			div1.addEventListener("mouseover",function(){
				 var r = parseInt(Math.random()*255);
				 var g = parseInt(Math.random()*255);
				 var b = parseInt(Math.random()*255);
				 var s = "background:rgb("+r+","+g+","+b+")";
				 
				 console.log(s);
				  
				 div1.style = s;
				 
			})
		</script>
	</body>
</html>

  

 

 

2、效果(mouseover)

 

 

 3、总结

mouseover会给子节点也绑定事件,传说中的冒泡事件,所以出现鼠标移动过程中触发三次事件

 

1、代码(mouseenter)

 

 

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.div1{
				width: 600px;
				height: 600px;
				background: red;
			}
			div{
				padding: 20px;
				
			}
			div div{
				background-color: white;
			}
			div div div{
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div class="div1" id = \'div1\'>
			<div>
				<div></div>
			</div>
			
		</div>
		<script>
			var div1 = document.getElementById("div1");
			div1.addEventListener("mouseenter",function(){
				 var r = parseInt(Math.random()*255);
				 var g = parseInt(Math.random()*255);
				 var b = parseInt(Math.random()*255);
				 var s = "background:rgb("+r+","+g+","+b+")";
				 
				 console.log(s);
				  
				 div1.style = s;
				 
			})
		</script>
	</body>
</html>



<!--
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.div1{
				width: 600px;
				height: 600px;
				background: red;
			}
			div{
				padding: 20px;
				
			}
			div div{
				background-color: white;
			}
			div div div{
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div class="div1" id = \'div1\'>
			<div>
				<div></div>
			</div>
			
		</div>
		<script>
			var div1 = document.getElementById("div1");
			div1.addEventListener("mouseover",function(){
				 var r = parseInt(Math.random()*255);
				 var g = parseInt(Math.random()*255);
				 var b = parseInt(Math.random()*255);
				 var s = "background:rgb("+r+","+g+","+b+")";
				 
				 console.log(s);
				  
				 div1.style = s;
				 
			})
		</script>
	</body>
</html>
-->

  

 

2、效果(mouseenter)

 

 

3、总结

mouseenter不是给子节点也绑定事件,也就是说,事件没有冒泡,所以在鼠标移动过程中只触发一次事件

 

以上是关于javascript----mouseover和mouseenter的区别的主要内容,如果未能解决你的问题,请参考以下文章

javascript mouseover 未注册,但 CSS 是

AppDelegate.m 和 View Controller.m 的区别

python累计求和,编写一个程序,从键盘输入两个整数m和n,求m和n之间(包括m和n)

m.2 nvme和m.2的区别是啥?

输入两个整数n和m,从数列1,2,3,……n中随意取几个数,使其和等于m 转载

显卡后面加h和m的区别