JavaScript 事件
在本教程中，你将学习如何使用 JavaScript 处理事件。
了解事件和事件处理程序
当用户与网页交互时会发生事件，例如当他点击链接或按钮，将文本输入到输入框或文本区域，在选择框中进行选择，在键盘上按下键，移动鼠标指针时提交表单等。在某些情况下，浏览器本身可以触发事件，例如页面加载和卸载事件。
发生事件时，你可以使用 JavaScript 事件处理程序（或事件侦听器）来检测它们并执行特定任务或任务集。按照惯例，事件处理程序的名称始终以单词 on 开头，因此调用 click 事件 onclick 的事件处理程序，类似地调用 load 事件的 onload 事件处理程序，调用 blur 事件的事件处理程序 onblur ，等等。
有几种方法可以分配事件处理程序。最简单的方法是使用特殊的事件处理程序属性将它们直接添加到 HTML 元素的开始标记中。例如，要为按钮元素分配单击处理程序，我们可以使用 onclick 属性，如下所示：
<button type="button" onclick="alert('Hello World!')">Click Me</button>
但是，为了使 JavaScript 与 HTML 分离，你可以在外部 JavaScript 文件中或在 <script> 和 </script> 标记内设置事件处理程序，如下所示：
<button type="button" id="myBtn">Click Me</button>
<script>
function sayHello() {
alert('Hello World!');
}
document.getElementById("myBtn").onclick = sayHello;
</script>
注意： 由于 HTML 属性不区分大小写，因此 onclick 也可以写为 onClick ， OnClick 或 ONCLICK 。但它的值是区分大小写的。
通常，事件可以分为四个主要组 - 鼠标事件，键盘事件，表单事件和文档/窗口事件 。还有很多其他事件，我们将在后面的章节中了解它们。以下部分将逐一简要介绍最有用的事件以及现实生活实践示例。
鼠标事件
当用户单击某个元素，将鼠标指针移动到元素上等时触发鼠标事件。这是一些最重要的鼠标事件及其事件处理程序。
Click 事件（onclick）
当用户单击网页上的元素时，会发生单击事件。通常，这些是表单元素和链接。你可以使用 onclick 事件处理程序处理 click 事件。
单击元素时，以下示例将显示警告消息。
<button type="button" onclick="alert('You have clicked a button!');">Click Me</button>
<a href="#" onclick="alert('You have clicked a link!');">Click Me</a>
Contextmenu 事件（oncontextmenu）
当用户在元素上单击鼠标右键以打开上下文菜单时，会发生 contextmenu 事件。你可以使用 oncontextmenu 事件处理程序处理 contextmenu 事件。
右键单击元素时，以下示例将显示警告消息。
<button type="button" oncontextmenu="alert('You have right-clicked a button!');">Right Click on Me</button>
<a href="#" oncontextmenu="alert('You have right-clicked a link!');">Right Click on Me</a>
鼠标悬停事件（onmouseover）
当用户将鼠标指针移动到元素上时，会发生鼠标悬停事件。
你可以使用 onmouseover 事件处理程序处理 mouseover 事件。将鼠标放在元素上时，以下示例将显示警告消息。
<button type="button" onmouseover="alert('You have placed mouse pointer over a button!');">Place Mouse Over Me</button>
<a href="#" onmouseover="alert('You have placed mouse pointer over a link!');">Place Mouse Over Me</a>
Mouseout 事件（onmouseout）
当用户将鼠标指针移动到元素之外时，会发生 mouseout 事件。
你可以使用 onmouseout 事件处理程序处理 mouseout 事件。以下示例将在 mouseout 事件发生时显示警告消息。
<button type="button" onmouseout="alert('You have moved out of the button!');">Place Mouse Inside Me and Move Out</button>
<a href="#" onmouseout="alert('You have moved out of the link!');">Place Mouse Inside Me and Move Out</a>
键盘事件
当用户按下或释放键盘上的键时会触发键盘事件。这是一些最重要的键盘事件及其事件处理程序。
Keydown 活动（onkeydown）
当用户按下键盘上的键时，会发生 keydown 事件。
你可以使用 onkeydown 事件处理程序处理 keydown 事件。以下示例将在 keydown 事件发生时显示警告消息。
<input type="text" onkeydown="alert('You have pressed a key inside text input!')">
<textarea onkeydown="alert('You have pressed a key inside textarea!')"></textarea>
Keyup 事件（onkeyup）
当用户在键盘上释放键时，会发生键盘事件。
你可以使用 onkeyup 事件处理程序处理 keyup 事件。以下示例将在 keyup 事件发生时显示警告消息。
<input type="text" onkeyup="alert('You have released a key inside text input!')">
<textarea onkeyup="alert('You have released a key inside textarea!')"></textarea>
Keypress 活动（onkeypress）
当用户按下键盘上具有与之关联的字符值的键时，会发生按键事件。例如，Ctrl，Shift，Alt，Esc，Arrow 键等键不会生成按键事件，但会生成 keydown 和 keyup 事件。
你可以使用 onkeypress 事件处理程序处理 keypress 事件。以下示例将在按键事件发生时显示警告消息。
<input type="text" onkeypress="alert('You have pressed a key inside text input!')">
<textarea onkeypress="alert('You have pressed a key inside textarea!')"></textarea>
表格活动
当表单控件接收或失去焦点关注或用户修改表单控件值时触发表单事件，例如在文本输入中键入文本，选择选择框中的任何选项等。这是一些最重要的表单事件和事件处理程序。
焦点事件（onfocus）
当用户将焦点放在网页上的元素上时，会发生焦点事件。
你可以使用 onfocus 事件处理程序处理焦点事件。以下示例将突出显示接收焦点时以黄色输入的文本的背景。
<script>
function highlightInput(elm){
elm.style.background = "yellow";
}
</script>
<input type="text" onfocus="highlightInput(this)">
<button type="button">Button</button>
**注意：**事件处理程序中 this 关键字的值是指在其上具有处理程序的元素（即当前正在传递事件的位置）。
模糊事件（onblur）
当用户将焦点从表单元素或窗口移开时，会发生模糊事件。
你可以使用 onblur 事件处理程序处理 blur 事件。以下示例将在文本输入元素失去焦点时显示警告消息。
<input type="text" onblur="alert('Text input loses focus!')">
<button type="button">Submit</button>
要将焦点从表单元素中移开，请先在其中单击，然后按键盘上的 Tab 键，将焦点放在其他内容上，或单击其外部。
变更事件（onchange）
当用户更改表单元素的值时，会发生更改事件。
你可以使用 onchange 事件处理程序处理 change 事件。以下示例将在你更改选择框中的选项时显示警告消息。
<select onchange="alert('You have changed the selection!');">
<option>Select</option>
<option>Male</option>
<option>Female</option>
</select>
提交事件（onsubmit）
仅当用户在网页上提交表单时才会发生提交事件。
你可以使用 onsubmit 事件处理程序处理 submit 事件。以下示例将在向服务器提交表单时向你显示警报消息。
<form action="action.php" method="post" onsubmit="alert('Form data will be submitted to the server!');">
<label>First Name:</label>
<input type="text" name="first-name" required>
<input type="submit" value="Submit">
</form>
文件/窗口事件
在页面加载或用户调整浏览器窗口大小等情况下也会触发事件。这里有一些最重要的文档/窗口事件及其事件处理程序。
加载事件（onload）
当网页在 Web 浏览器中完成加载时，会发生加载事件。
你可以使用 onload 事件处理程序处理 load 事件。以下示例将在页面完成加载后立即显示警报消息。
<body onload="window.alert('Page is loaded successfully!');">
<h1>This is a heading</h1>
<p>This is paragraph of text.</p>
</body>
卸载事件（onunload）
当用户离开当前网页时，会发生卸载事件。
你可以使用 onunload 事件处理程序处理 unload 事件。当你尝试离开页面时，以下示例将显示警告消息。
<body onunload="alert('Are you sure you want to leave this page?');">
<h1>This is a heading</h1>
<p>This is paragraph of text.</p>
</body>
调整大小事件（onresize）
当用户调整浏览器窗口大小时，会发生 resize 事件。在浏览器窗口最小化或最大化的情况下，也会发生 resize 事件。
你可以使用 onresize 事件处理程序处理 resize 事件。以下示例将在你将浏览器窗口调整为新的宽度和高度时显示警告消息。
<p id="result"></p>
<script>
function displayWindowSize() {
var w = window.outerWidth;
var h = window.outerHeight;
var txt = "Window size: width=" + w + ", height=" + h;
document.getElementById("result").innerHTML = txt;
}
window.onresize = displayWindowSize;
</script>