19. JS事件（event）处理
1. 前言
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 | 当提交表单时触发此事件 | |
2. 事件绑定
事件只有与 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>
3. 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>
