JavaScript事件类型、事件、事件句柄

最新推荐文章于 2025-11-19 22:16:53 发布

原创最新推荐文章于 2025-11-19 22:16:53 发布 · 3.1k 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #事件

阿哈哈哈大前端专栏收录该内容

66 篇文章

订阅专栏

本文详细介绍了网页中的各种事件，包括表单事件如提交(submit)、重置(reset)等，鼠标事件如点击(click)、双击(dblclick)等，键盘事件如按键(down)、松开(up)等，以及窗口事件如加载(load)、卸载(unload)等，并提供了具体的应用实例。

1. 表单事件

事件	事件句柄	事件解释
Change	onChange	当元素改变时执行JS代码
Submit	onSubmit	当表单被提交时执行JS代码
Reset	onReset	当表单被重置时执行JS代码
Select	onSelect	当元素被选取时执行JS代码
Blur	onBlur	当元素失去焦点时执行JS代码
Focus	onFocus	当元素获得焦点时执行JS代码

获得焦点与失去焦点事件

当表单获得焦点时会触发focus获得焦点事件；当表单控件失去焦点时会触发blur事件。

应用：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>获得/失去焦点测试</title>
	<script type="text/javascript">
		function getFocus(){ document.bgColor="#000000"; }
		function loseFocus(){ document.bgColor="#FFFFFF"; }
	</script>
	
</head>
<body>
	<form>
		<br/><input type="button" onfocus="getFocus()" value="获得/失去焦点触发事件" onblur="loseFocus()" />
	</form>
</body>
</html>οnfοcus="getFocus()" value="获得/失去焦点触发事件" οnblur="loseFocus()" />
	</form>
</body>
</html>

提交及重置事件

应用：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>表单提交、重置事件的应用</title>
	<script language="javascript" type="text/javascript">
		function $ (id) {
			return document.getElementById(id);
		}
		function submitTest() {
			var msg = "用户名是：" + $ ("input1").value;
			msg += "\n密码是：" + $ ("input2").value;
			alert(msg);
			return false;
		}
		function resetTest() { alert("将数据清空");}
	</script>
	
</head>
<body>
	<form onsubmit="return submitTest();" onreset="resetTest()">
		<fieldset>
			<legend>表单数据提交</legend>
			<br><label>用户名：</label><input type="text" id="input1">
 			<br><label>密   码：</label><input type="password" id="input2">
			<br><input type="submit" value="提交">
			<input type="reset" value="重置">
		</fieldset>
	</form>
</body>
</html>οnsubmit="return submitTest();" οnreset="resetTest()">
		<fieldset>
			<legend>表单数据提交</legend>
			<br><label>用户名：</label><input type="text" id="input1">
 			<br><label>密   码：</label><input type="password" id="input2">
			<br><input type="submit" value="提交">
			<input type="reset" value="重置">
		</fieldset>
	</form>
</body>
</html>

改变及选择事件

<form>
		<input type="text" name="" value="文本被选择后触发事件" onselect="Javascript:alert('内容已被选中！')">
	</form>οnselect="Javascript:alert('内容已被选中！')">
	</form>

鼠标事件

事件	事件句柄	事件解释
Click	onClick	当鼠标被单击时执行JS代码
Dblclick	onDblclick	当鼠标被双击时执行JS代码
MouseDown	onMouseDown	当鼠标按钮被按下时执行JS代码
MouseMove	onMouseMove	当鼠标指针移动时执行JS代码
MouseOver	onMouseOver	当鼠标指针悬浮于某元素之上时执行JS代码
MouseOut	onMouseOut	当鼠标移出某元素时执行JS代码
MouseUp	onMouseUp	当鼠标按钮被松开时执行JS代码

<input type="button" name="click" value="鼠标单击" onclick="alert('你单击了我!')">

<input type="button" name="click" value="鼠标双击" onclick="alert('你双击了我!')">

3. 键盘事件

事件	事件句柄	事件解释
KeyDown	onKeyDown	当键盘被按下时执行JS代码
KeyPress	onKeyPress	当键盘被按下后又松开时执行JS代码
KeyUp	onKeyUp	当键盘被松开时执行JS代码