JavaScript中Event对象

最新推荐文章于 2025-07-28 09:32:02 发布

原创最新推荐文章于 2025-07-28 09:32:02 发布 · 165 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

HTML 同时被 2 个专栏收录

9 篇文章

订阅专栏

JavaScript

4 篇文章

订阅专栏

本文详细介绍了HTML中的关键事件，包括onsubmit、onchange、onfocus、onblur和onkeydown等，解释了这些事件如何工作以及何时触发，对于理解网页交互机制非常有用。

onsubmit

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			function t(){
				return true;
			}
		</style>
		
	</head>
	<body>
		<!--
        	onsubmit属性必须在form表单中使用，
        	并且在form表单中时，调用方法时必须使用return关键字，而且调用的方法必须有返回值，而返回值必须为true/false。
        	只有true时，表单才会提交
        -->
		<form action="https://www.baidu.com/s" onsubmit="return t()">
			<input name="wd" style="text-indent: 3px;"/>
			<input type="submit" value="按钮" id="button"/>
		</form>
		
	</body>
</html>

onchange

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function tt(){
				console.log(111);
			}
		</script>
		
	</head>
	<body>
		<!--
        	onchange:当在某个标签上定义该属性时，用户改变该标签的内容时，就会触发定义的函数
        -->
		<form action="https://www.baidu.com/s" >
			<input name="wd" style="text-indent: 3px;"/>
			<select onchange="tt()">
				<option>河南省</option>
				<option>山西省</option>
			</select>
		</form>
		
	</body>
</html>

onfocus

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function tt(){
				console.log(111);
			}
		</script>
		
	</head>
	<body>
		<!--
        	onfocus:获取焦点，属性值可以为你定义的函数。在获取焦点时执行函数
        -->
		<form action="https://www.baidu.com/s" >
			<input name="wd" style="text-indent: 3px;" onfocus="tt()"/>
			
		</form>
		
	</body>
</html>

onblur

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function tt(){
				console.log(111);
			}
		</script>
		
	</head>
	<body>
		<!--
        	onblur:同样具有onfocus的功能，但是同时在焦点离开的时候，会执行你指定的函数，
        -->
		<form action="https://www.baidu.com/s" >
			<input name="wd" style="text-indent: 3px;" onblur="tt()"/>
		
		</form>
		
	</body>
</html>

onKeydown

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function tt(){
				console.log(111);
			}
		</script>
		
	</head>
	<body>
		<!--
        	onkeydown:键盘按下的时候，不断执行某个函数。
        	大多用于字数的提示
        -->
		<form action="https://www.baidu.com/s" >
			<input name="wd" style="text-indent: 3px;" onkeydown="tt()"/>
		
		</form>
		
	</body>
</html>

onload

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function tt(){
				var c = document.getElementById("Text");
				console.log(c);
			}
		</script>
		
	</head>
	<body onload="tt()">
		<!--
        	onload:属性值指定的方法只有在全部html页面加载完成之后才会进行执行
        -->
		<form action="https://www.baidu.com/s" >
			<!--<input name="wd" id="Text" style="text-indent: 3px;"/>-->
		</form>
		<input name="wd" id="Text" style="text-indent: 3px;"/>
	</body>
</html>