JavaScript之事件

小半 • 2023年1月12日下午2:52 • 技术随笔 • 阅读 198

一、鼠标事件

案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#d1{
				width: 100px;
				height: 100px;
				background-color: red;
			}
		</style>
		
		<script type="text/javascript">
			function fun1(){
				console.log("双击666")
			}
			
			function fun2(){
				console.log("鼠标按下")
			}
			function fun3(){
				console.log("鼠标抬起")
			}
			function fun4(){
				console.log("鼠标进入")
			}
			function fun5(){
				console.log("鼠标离开")
			}
			function fun6(){
				console.log("鼠标移动")
			}
			
		</script>
	</head>
	<body>
		<div id="d1" ondblclick="fun1()" 
					onmousedown="fun2()" 
					onmouseup="fun3()" 
					onmouseenter="fun4()" 
					onmouseleave="fun5()"
					onmousemove="fun6()">
		</div>
	</body>
</html>

二、按键事件

案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			function func1(){
				console.log("按钮按下")
			}
			function func2(){
				console.log("按钮抬起")
			}
			function func3(){
				console.log("按钮按下并抬起")
			}
		</script>
	</head>
	<body>
		<input type="text" onkeydown="func1()" 
		onkeyup="func2()" onkeypress="func3()"/>
	</body>
</html>

三、表单事件

案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			function fun1(){
				console.log("获得焦点")
			}
			function fun2(){
				console.log("失去焦点")
			}
			function fun3(){
				console.log("正在输入")
			}
			function fun4(){
				console.log("内容改变")
			}
			function fun5(sel){
				console.log(sel.value)
			}
			
			function fun6(){
				alert("提交")
				return false
			}
			function fun7(){
				console.log("重置")
				return false
			}
			
			
		</script>
	</head>
	<body>
		<form action="https://www.baidu.com" method="get" onsubmit="fun6()" onreset="fun7()">
			用户名:<input type="text" name="username" id="username" value="" onfocus="fun1()" onblur="fun2()" oninput="fun3()" onchange="fun4()"/><br />
			<br />
			<select name="city" onchange="fun5(this)">
				<option value="1" selected>--请选择城市--</option>
				<option value="2">北京</option>
				<option value="3">长沙</option>
				<option value="4">济南</option>
			</select>
			
			<br />
			<br />
			<!--<input type="submit" value="提交数据" onsubmit="fun6()"/>
	
			<input type="reset" value="充值数据" onreset="fun7()"/>-->
			
			<input type="submit" value="提交数据"/>
	
			<input type="reset" value="充值数据"/>
		</form>
	</body>
</html>

四、页面加载事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			function testFun(){
				var in1=document.getElementById("d1")
				var v1=in1.value
				console.log(v1)
			}
		</script>
	</head>
	<body onload="testFun()">
		<input type="text" name="d1" id="d1" value="test" />
	</body>
</html>