Javascript：onmousemove 、alert 、onmousedown 、onmouseup、onmouseover、onmouseout 用法以及例子

Cosmoshhhyyy

已于 2023-07-05 23:37:49 修改

阅读量2.1k

点赞数 2

分类专栏： HTML + CSS + JS 文章标签：前端开发语言 javascript

于 2023-07-05 23:37:25 首次发布

本文链接：https://blog.csdn.net/Cosmoshhhyyy/article/details/131565800

版权

HTML + CSS + JS 专栏收录该内容

21 篇文章

订阅专栏

这篇文章详细介绍了HTML中的几个重要事件处理函数，如onmousemove改变背景色，onmousedown和onmouseup控制鼠标按住与松开时的样式变化，onmouseover和onmouseout实现鼠标覆盖和离开元素时的效果，以及如何使用display属性隐藏和显示子块，并通过JavaScript实现动态变换效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目录标题

- 事件

事件

onmousemove 移动鼠标经过（这里鼠标没有录制上）

<!DOCTYPE HTML>
<html>
        <head>
        	<meta charset="utf-8">
      	<style>
		.sty1{background-color:#aaa;height:200px;width:200px}
	</style>
        </head>
        <body>
     	<div id = "div1" class = "sty1" onclick = "m1()" onmousemove = "m2()"></div>
         </body>
         <script>
	function m1(){
		alert("哈哈哈");
	}
	function m2(){
		var x = document.getElementById("div1");
		x.style.backgroundColor = "#2ac";
	}
         </script>

    </html>

在这里插入图片描述

alert 弹窗

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MUUfnz32-1688570846277)(image-23.png)]

onmousedown onmouseup鼠标按住与松开

onmousedown 鼠标按住触发
onmouseup 鼠标松开触发

        <body>
     	<div id = "div1" class = "sty1" onclick = "m1()" onmousemove = "m2()"></div>
	<div id = "div2" class = "sty1" onmousedown="m4()" onmouseup="m3()"></div>
         </body>
         <script>
	function m1(){
		alert("哈哈哈");
	}
	function m2(){
		var x = document.getElementById("div1");
		x.style.backgroundColor = "#2ac";
	}
	function m3(){
		var x = document.getElementById("div2");
		x.style.backgroundColor = "#aac";
	}
	function m4(){
		var x = document.getElementById("div2");
		x.style.backgroundColor = "#2ac";
	}
         </script>

在这里插入图片描述

onmouseover onmouseout 鼠标覆盖和离开

onmouseover 鼠标覆盖
onmouseout 鼠标离开

<!DOCTYPE HTML>
<html>
        <head>
        	<meta charset="utf-8">
      	<style>
		.sty1{background-color:#aaa;height:200px;width:200px;margin-top:20px;}
	</style>
        </head>
        <body>
     	<div id = "div1" class = "sty1" onclick = "m1()" onmousemove = "m2()"></div>
	<div id = "div2" class = "sty1" onmousedown="m4()" onmouseup="m3()"></div>
	<div id = "div3" class = "sty1" onmouseover="m5()" onmouseout="m6()"></div>
         </body>
         <script>
	function m1(){
		alert("哈哈哈");
	}
	function m2(){
		var x = document.getElementById("div1");
		x.style.backgroundColor = "#2ac";
	}
	function m3(){
		var x = document.getElementById("div2");
		x.style.backgroundColor = "#aaa";
	}
	function m4(){
		var x = document.getElementById("div2");
		x.style.backgroundColor = "#2ac";
	}
	function m5(){
		var x = document.getElementById("div3");
		x.style.backgroundColor = "#2ac";
	}
	function m6(){
		var x = document.getElementById("div3");
		x.style.backgroundColor = "#aaa";
	}
         </script>

    </html>

在这里插入图片描述

子块的 display 隐藏与消失

display:none 隐藏
display:block 显示
注意：在子块可以比其父块大，而且因为其为子块onmouseover 鼠标覆盖在子块上也会触发动作的。

<!DOCTYPE HTML>
<html>
        <head>
        	<meta charset="utf-8">
      	<style>
		.sty1{background-color:#aaa;height:200px;width:200px;margin-top:20px;}
		.sty2{background-color:#a00;height:300px;width:400px;box-shadow:10px 10px #000;margin-left:200px;margin-top:20px;display:none;}
	</style>
        </head>
        <body>
     	<div id = "div1" class = "sty1" onclick = "m1()" onmousemove = "m2()"></div>
	<div id = "div2" class = "sty1" onmousedown="m4()" onmouseup="m3()"></div>
	<div id = "div3" class = "sty1" onmouseover="m5()" onmouseout="m6()">
		<div id = "div4" class = "sty2"></div>
	</div>
         </body>
         <script>
	function m1(){
		alert("哈哈哈");
	}
	function m2(){
		var x = document.getElementById("div1");
		x.style.backgroundColor = "#2ac";
	}
	function m3(){
		var x = document.getElementById("div2");
		x.style.backgroundColor = "#aaa";
	}
	function m4(){
		var x = document.getElementById("div2");
		x.style.backgroundColor = "#2ac";
	}
	function m5(){
		var x = document.getElementById("div4");
		x.style.display = "block"; // 显示
	}
	function m6(){
		var x = document.getElementById("div4");
		x.style.display = "none"; // 隐藏
	}
         </script>

    </html>

在这里插入图片描述

总结

我们也可以加上旋转，变大变小，透明度等等各种事件的变化。

<!DOCTYPE HTML>
<html>
        <head>
        	<meta charset="utf-8">
      	<style>
		.sty1{background-color:#aaa;height:200px;width:200px;margin-top:20px;}
		.sty2{background-color:#a00;height:300px;width:400px;box-shadow:10px 10px #000;margin-left:200px;margin-top:20px;display:none;}
	</style>
        </head>
        <body>
     	<div id = "div1" class = "sty1" onclick = "m1(1)" onmousemove = "m2()"></div>
	<div id = "div2" class = "sty1" onmousedown="m4()" onmouseup="m3()"></div>
	<div id = "div3" class = "sty1" onmouseover="m5()" onmouseout="m6()">
		<div id = "div4" class = "sty2"></div>
	</div>
         </body>
         <script>
	function m1( a){
	       var x = document.getElementById("div1");
	             x.style.backgroundColor ="#2ac"
	             x.style.transform = "rotate(" + (30 + a) + "deg)";
		x.style.opacity = "0.5";
		x.style.width = (200+ a) %200+ "px";
		x.style.height = (200+ a )%200+ "px"	
	       setTimeout("m1(" + (a + 1) + ")" , 20);
	}
	function m2(){
		var x = document.getElementById("div1");
		x.style.backgroundColor = "#2ac";
	}
	function m3(){
		var x = document.getElementById("div2");
		x.transform = "rotate(20)";
		x.style.backgroundColor = "#aaa";
	}
	function m4(){
		var x = document.getElementById("div2");
		x.style.backgroundColor = "#2ac";
		x.style.width = "150px";
		x.style.height = "150px";
		
	}
	function m5(){
		var x = document.getElementById("div4");
		x.style.display = "block"; // 显示
		x.style.opacity = "0.1";

	}
	function m6(){
		var x = document.getElementById("div4");
		x.style.display = "none"; // 隐藏
	}
         </script>

    </html>