JavaScript的事件介绍_关于javascript中事件的描述-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_37484253/article/details/85332746

js的事件概述

什么是事件？

js提供的一套API（已经做好的一堆对象，可以帮助你完成一些任务），识别用户在浏览器上的操作（鼠标点击、提交注册表单，点选单选框等。），识别到用户操作之后，可以针对用户的操作，执行一些js代码。

具体有哪些事件呢？

常用的事件列表：

事件名	描述
onclick	鼠标点击某个对象
onload	某个页面或图像被完成加载
onsubmit	当表单提交时触发该事件---注意事件源是表单form
ondblclick	鼠标双击某个对象
onblur	元素失去焦点（离焦事件）
onfocus	元素获得焦点
onchange	用户改变域（input输入框）的内容
onkeydown	某个键盘的键被按下
onkeypress	某个键盘的键被按下或按住
onkeyup	某个键盘的键被松开
onmousedown	某个鼠标按键被按下
onmouseup	某个鼠标按键被松开
onmouseover	鼠标被移到某元素之上
onmouseout	鼠标从某元素移开
onmousemove	鼠标被移动

如何使用JavaScript代码，来侦测这些事件？

js事件操作的具体步骤

第一步：获取要侦测事件的html元素

第二步：查询html元素身上具有那些事件（事件在标签上以属性的形式存在，属性的值都是JavaScript代码）。

第三步：指定标签上要侦测事件的名称（其实就是一个书写属性名称）

第四步：给事件绑定要执行的js函数。

代码示例：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body onload="alert('页面加载事件')">
		<!--
        	1、给body标签添加页面加载时间：onload
			2、给按钮添加点击事件：onclick
			3、给表单添加表单提交事件：onsubmit
			4、给用户名称后面的input添加离焦事件：onblur
			5、给用户密码后面的input添加元素改变事件：onchange
        -->
		<input type="button" id="btn" value="测试" onclick="alert('点击事件！')"/>
		<fieldset>
			<legend>注册页面</legend>
			<form action="#" method="post" onsubmit="alert('表单提交事件')">
				<table>
					<tr>
						<td>用户名称：</td>
						<td><input id="user" type="text" name="user" onblur="alert('离焦事件')"/>
						</td>
					</tr>
					<tr>
						<td>用户密码：</td>
						<td><input id="pwd" type="text" name="pwd" onchange="alert('元素内容改变事件')"/>
							<span id="pwdspan"></span></td>
					</tr>
					<tr>
						<td><input type="submit" value="登录" /></td>
					</tr>
				</table>
			</form>
		</fieldset>
	</body>
</html>

总结：JavaScript事件就是为了监控用户的操作——根据用户操作，执行相应的JavaScript代码。