js事件-鼠标

最新推荐文章于 2022-08-04 14:12:19 发布

suiseidesu

最新推荐文章于 2022-08-04 14:12:19 发布

阅读量194

点赞数

分类专栏：笔记 JavaScript

本文链接：https://blog.csdn.net/qq_50270170/article/details/108579538

版权

JavaScript 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

笔记

8 篇文章 0 订阅

订阅专栏

事件

事件源

1.鼠标单击事件：onclick

<body>
	<p id="p1" onclick="fun()">单机事件测试</p>
</body>
<script type="text/javascript">
	function fun(){
		//获取指定元素
		var p1 = document.getElementById("p1");
		p1.innerText="我被单击了!"
		p1.style.fontSize="90px";
		p1.style.color="blue";
	}
</script>

2.鼠标双击事件：ondblclick

<style type="text/css">
			#div1{
				width: 100px;
				height: 100px;
				background-color: skyblue;
			}
		</style>
	</head>
	<body>
		<div id="div1" onclick="zoomout()" ondblclick="zoomin()"></div>
	</body>
	<script type="text/javascript">
		function zoomout(){
			var div1 = document.getElementById("div1");
			div1.style.width="200px";
			div1.style.height="200px";
			div1.style.backgroundColor="red";
		}
		function zoomin(){
			var div1 = document.getElementById("div1");
			div1.style.height="300px";
			div1.style.width="300px";
			div1.style.backgroundColor="yellowgreen";
		}
	</script>

3.鼠标按下和抬起（onmousedown / onmouseup）

<style type="text/css">
			#div1{
				width: 100px;
				height: 100px;
				background-color: black;
			}
		</style>
	</head>
	<body>
		<div id="div1" onmousedown="zoomout()" onmouseup="zoomin()"></div>
	</body>
	<script type="text/javascript">
		function zoomout() {
		var div1 = document.getElementById("div1");
		div1.style.width = "200px";
		div1.style.height = "200px";
		div1.style.backgroundColor="yellowgreen";
		}
		function zoomin() {
		var div1 = document.getElementById("div1");
		div1.style.width = "100px";
		div1.style.height = "100px";
		div1.style.backgroundColor="black";
		}
	</script>

3.鼠标移入/离开（onmouseenter/onmouseleave）

<style type="text/css">
			#div1{
				width: 100px;
				height: 100px;
				background-color: black;
			}
		</style>
	</head>
	<body>
		<div id="div1" onmouseenter="zoomout()" onmouseleave="zoomin()"
		 onmousedown="zoomon" onmouseup="zomout"
		  onclick="zoomr()" ondblclick="zoomt()"></div>
	</body>
	<script type="text/javascript">
		function zoomout() {
		var div1 = document.getElementById("div1");
		div1.style.width = "100px";
		div1.style.height = "100px";
		div1.style.backgroundColor="red";
		}
		function zoomin() {
		var div1 = document.getElementById("div1");
		div1.style.width = "200px";
		div1.style.height = "200px";
		div1.style.backgroundColor="yellow";
		}
		function zoomon() {
		var div1 = document.getElementById("div1");
		div1.style.width = "300px";
		div1.style.height = "300px";
		div1.style.backgroundColor="green";
		}
		function zomout() {
		var div1 = document.getElementById("div1");
		div1.style.width = "400px";
		div1.style.height = "400px";
		div1.style.backgroundColor="blue";
		}
		function zoomr() {
		var div1 = document.getElementById("div1");
		div1.style.width = "500px";
		div1.style.height = "500px";
		div1.style.backgroundColor="purple";
		}
			
		function zoomt() {
		var div1 = document.getElementById("div1");
		div1.style.width = "600px";
		div1.style.height = "600px";
		div1.style.backgroundColor="seagreen";
			}					
		</script>

suiseidesu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js事件-鼠标

事件事件源1.鼠标单击事件：onclick<body> <p id="p1" onclick="fun()">单机事件测试</p></body><script type="text/javascript"> function fun(){ //获取指定元素 var p1 = document.getElementById("p1"); p1.innerText="我被单击了!" p1.style.fontSize="9
复制链接

扫一扫

专栏目录