Web前端js中鼠标事件

最新推荐文章于 2024-05-08 20:41:00 发布

木_心

最新推荐文章于 2024-05-08 20:41:00 发布

阅读量6.5k

点赞数

分类专栏： web前端文章标签： web前端鼠标事件

本文链接：https://blog.csdn.net/luckily_star/article/details/78095997

版权

web前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

onmousemove鼠标在某元素上移动

onmouseover鼠标移到某元素之上（事件冒泡）；

onmouseout鼠标移出某元素；

omouseleave鼠标离开某元素；

onmouseenter鼠标移入某元素之上（没有事件冒泡）；

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		
		<style>
			div{
				width: 300px;
				height: 300px;
				border: 1px solid black;
				float: right;
				margin: 20px 20px;
			}
			div p{
				background-color:darkgray ;
				color: white;
				height: 50px;
				text-align:center;
				line-height: 50px;
			}
		</style>
		
		
		<script>
			var a = 0;
			var b = 0;
			var c = 0;
			var d = 0;
			var e = 0;
			
			//鼠标移动事件
			function myMove(){
				a++;
				var font = document.getElementById("a");//获得font标签对象
				font.innerHTML = a;
			}
			
			//	鼠标移入事件
			function myOver(){
				b++;
				var font = document.getElementById("b");//获得font标签对象
				font.innerHTML = b;
			}
			
			//鼠标移出事件
			function myOut(){
				c++;
				var font = document.getElementById("c");//获得font标签对象
				font.innerHTML = c;
			}
			
			//鼠标移出事件
			function myLeave(){
				d++;
				var font = document.getElementById("d");
				font.innerHTML = d;
				
			}
			
			//鼠标移入事件
			function myEnter(){
				e++;
				var font = document.getElementById("e");
				font.innerHTML = e;
				
			}
		</script>
	</head>
	<body>
		
		<div οnmοusemοve="myMove()">
			<font id = "a">0</font>
			<p>onmousemove鼠标移动运行脚本</p>
		</div>
		
		<div οnmοuseοver="myOver()">
			<font id="b">0</font>
			<p>onmouseover鼠标移至之上时运行脚本</p>
		</div>
		
		<div οnmοuseοut="myOut()">
			<font id="c">0</font>
			<p>onmouseout鼠标移出元素时运行脚本</p>
		</div>
		
		<div οnmοuseleave="myLeave()">
			<font id="d">0</font>
			<p>omouseleave鼠标移出</p>
		</div>
		
		<div οnmοuseenter="myEnter()">
			<font id="e">0</font>
			<p>onmouseenter鼠标移出</p>
		</div>
		
	</body>
</html>