010_JS中常用的几个事件的学习_010

本文链接：https://blog.csdn.net/weixin_44014460/article/details/106677591

本文详细介绍了JavaScript中常用的事件类型，包括单击、双击、鼠标悬停、鼠标离开、鼠标移动、键盘按键、焦点获取与失去及改变事件。通过具体代码示例展示了如何使用这些事件来调用JavaScript函数。

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

JS 常用事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			function demo1(){
				alert('单机事件完成')
			}
			function demo2(){
				alert('双击事件完成')
			}
			function demo3(){
				alert('鼠标放上来了')
			}
			function demo4(){
				alert('鼠标被绿了所以离开')
			}
			function demo5(){
				console.log("鼠标移动事件")
			}
			function demo6(){
				alert("键盘弹起触发该事件")
			}
			function demo7(){
				alert("键盘按下触发该事件")
			}
			function demo8(){
				alert("获得焦点触发的事件")
			}
			function demo9(){
				alert("失去焦点触发的事件")
			}
			function demo10(){
				alert("改变事件触发")
			}
			function demo11(){
				alert("页面加载完成事件")
			}
		</script>
	</head>
	<!--页面加载完成事件，当html页面从头加载到尾才触发该事件-->
	<body onload="demo11()">
		 <!--单击事件-->
	     <!--单击事件：通过单击鼠标触发的事件-->
		<input type="button" name="" id="" value="单击事件" onclick="demo1()" />
		<!--双击事件：通过双击鼠标触发的事件-->
		<input type="button" name="" id="" value="双击事件" ondblclick="demo2()" />
		
		<!--鼠标事件-->
		<!--鼠标放上触发的事件：-->
		<div id="" style="width: 300px;height: 300px;background-color: red;" onmouseover="demo3()">
		</div>
		<!--鼠标离开触发的事件-->
		<div id="" style="width: 300px;height: 300px;background-color: green;" onmouseout="demo4()">
		</div>
		<!--鼠标移动事件-->
		<div id="" style="width: 200px;height: 200px;background-color: blue;" onmousemove="demo5()">	
		</div>
		
		<!--键盘事件-->
		<!--键盘弹起事件-->
		<input type="text" name="" id="" value="" onkeyup="demo6()"/> <br /><br />
		<!--键盘弹起事件-->
		<input type="text" name="" id="" value="" onkeydown="demo7()"/>
		
		<!--焦点事件-->
		<!--获得焦点事件；就是把鼠标在文本框点一下显示可以输入-->
		<input type="text" name="" id="" value="" onfocus="demo8()"/>
		<!--失去焦点事件：比如注册账号的时候，当在文本框输入账号后，鼠标点到其他地方失去焦点，会提示账号是否合法-->
		<input type="text" name="" id="" value="" onblur="demo9()"/>
		<!--改变事件，改变事件是先获得焦点，然后改变内容，再失去焦点的事件-->
		<input type="text" name="" id="" value="" onchange="demo10()" />
		
	</body>
</html>
<!--通过触发事件，调用Js函数-->