JS事件（event）处理

1年前 (2024-04-27)

JS 事件（event）是当用户与网页进行交互时发生的事情，例如单机某个链接或按钮、在文本框中输入文本、按下键盘上的某个按键、移动鼠标等等。当事件发生时，您可以使用 JavaScript 中的事件处理程序（也可称为事件器）来检测并执行某些特定的程序。

一般情况下事件的名称都是以单词on开头的，例如点击事件 onclick、页面加载事件 onload 等。下表中列举了一些 JavaScript 中常用的事件：

事件		描述
鼠标、键盘事件	onclick	点击鼠标时触发此事件
	ondblclick	双击鼠标时触发此事件
	onmousedown	按下鼠标时触发此事件
	onmouseup	鼠标按下后又松开时触发此事件
	onmouseover	当鼠标移动到某个元素上方时触发此事件
	onmousemove	移动鼠标时触发此事件
	onmouseout	当鼠标离开某个元素范围时触发此事件
	onkeypress	当按下并松开键盘上的某个键时触发此事件
	onkeydown	当按下键盘上的某个按键时触发此事件
	onkeyup	当放开键盘上的某个按键时触发此事件
窗口事件	onabort	图片在下载过程中被用户中断时触发此事件
	onbeforeunload	当前页面的内容将要被改变时触发此事件
	onerror	出现错误时触发此事件
	onload	页面内容加载完成时触发此事件
	onmove	当移动浏览器的窗口时触发此事件
	onresize	当改变浏览器的窗口大小时触发此事件
	onscroll	当滚动浏览器的滚动条时触发此事件
	onstop	当按下浏览器的停止按钮或者正在下载的文件被中断时触发此事件
	oncontextmenu	当弹出右键上下文菜单时触发此事件
	onunload	改变当前页面时触发此事件
表单事件	onblur	当前元素失去焦点时触发此事件
	onchange	当前元素失去焦点并且元素的内容发生改变时触发此事件
	onfocus	当某个元素获得焦点时触发此事件
	onreset	当点击表单中的重置按钮时触发此事件
	onsubmit	当提交表单时触发此事件

事件绑定

事件只有与 HTML 元素绑定之后才能被触发，为 HTML 元素绑定事件处理程序的方法由很多，最简单的就是通过 HTML 事件属性来直接绑定事件处理程序，例如 onclick、onmouseover、onmouseout 等属性。

以 onclick 属性为例，通过该属性我们可以为指定的 HTML 元素定义鼠标点击事件（即在该元素上单击鼠标左键时触发的事件），示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<button type="button" onclick="myBtn()">按钮</button>
<script type="text/javascript">
function myBtn(){
alert("Hello World!");
}
</script>
</body>
</html>

除了上述方法外，我们也可以直接使用 JavaScript 中提供的内置函数来为指定元素绑定事件处理程序，如下例所示：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<button type="button" id="myBtn">按钮</button>
<script>
function sayHello() {
alert('Hello World!');
}
document.getElementById("myBtn").onclick = sayHello;
</script>
</body>
</html>

JS 事件示例

一般情况下，事件可以分为四大类——鼠标事件、键盘事件、表单事件和窗口事件，另外还有一些其它事件。下面通过几个示例来简单介绍一些比较常用的事件。

1) onmouseover 事件

onmouseover 事件就是指当用户鼠标指针移动到元素上时触发的事件，示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<button type="button" onmouseover="alert('您的鼠标已经移动到了该按钮上');">请将鼠标移动此处</button><br>
<a href="#" onmouseover="myEvent()">请将鼠标移动此处</a>
<script>
function myEvent() {
alert('您的鼠标已经移动到了该链接上');
}
</script>
</body>
</html>

2) onmouseout 事件

onmouseout 事件与 onmouseover 事件正好相反，onmouseout 事件会在鼠标从元素上离开时触发，示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<div style="width: 350px; height: 200px; border:1px solid black" id="myBox"></div>
<script>
function myEvent() {
alert('您的鼠标已经离开指定元素');
}
document.getElementById("myBox").onmouseout = myEvent;
</script>
</body>
</html>

3) onkeydown 事件

onkeydown 事件是指当用户按下键盘上的某个按键时触发的事件，示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<input type="text" onkeydown="myEvent()">
<script>
function myEvent() {
alert("您按下了键盘上的某个按钮");
}
</script>
</body>
</html>

4) onkeyup 事件

onkeyup 事件是指当用户按下键盘上的某个按键并将其释放（即按下并松开某个按键）时触发的事件，示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<input type="text" onkeyup="myEvent()">
<script>
function myEvent() {
alert("您按下了键盘上的某个按钮，并将其释放了");
}
</script>
</body>
</html>