JavaScript 事件
在本教程中，您将学习如何在 JavaScript 中处理事件。
了解事件和事件处理程序
事件是用户与网页交互时发生的事情，例如当他单击链接或按钮、在输入框或文本区域中输入文本、在选择框中进行选择、按下键盘上的键、移动时鼠标指针，提交表单等。在某些情况下，浏览器本身可以触发事件，例如页面加载和卸载事件。
当事件发生时，您可以使用 JavaScript 事件处理程序（或事件侦听器）来检测它们并执行特定任务或一组任务。按照惯例，事件处理程序的名称总是以单词"on"开头，因此单击事件的事件处理程序称为 onclick，类似地，加载事件的事件处理程序称为 onload ，模糊事件的事件处理程序称为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。 但它的 value 是区分大小写的。
一般来说，事件可以分为四大类 — 鼠标事件、键盘事件、表单事件< /a> 和 文档/窗口事件。 还有许多其他事件，我们将在后面的章节中了解它们。 以下部分将向您一一简要概述最有用的事件以及现实生活中的实践示例。
鼠标事件
当用户单击某个元素、将鼠标指针移到某个元素上等时会触发鼠标事件。以下是一些最重要的鼠标事件及其事件处理程序。
点击事件（onclick）
当用户点击网页上的某个元素时发生点击事件。 通常，这些是表单元素和链接。 您可以使用 onclick 事件处理程序来处理单击事件。
以下示例将在您单击元素时向您显示一条警告消息。
<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>上下文菜单事件（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）
当用户将鼠标指针移到一个元素上时会发生 mouseover 事件。
您可以使用 onmouseover 事件处理程序来处理鼠标悬停事件。 以下示例将在您将鼠标悬停在元素上时向您显示一条警告消息。
<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）
keyup 事件在用户释放键盘上的某个键时发生。
您可以使用 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>按键事件（onkeypress）
keypress 事件发生在用户按下键盘上具有与其关联的字符值的键时。 例如 Ctrl、Shift、Alt、Esc、箭头键等键不会产生 keypress 事件，但会产生 keydown 和 keyup 事件。
您可以使用 onkeypress 事件处理程序来处理按键事件。 以下示例将在按键事件发生时向您显示警报消息。
<input type="text" onkeypress="alert('You have pressed a key inside text input!')">
<textarea onkeypress="alert('You have pressed a key inside textarea!')"></textarea>Form Events
当表单控件接收或失去焦点或用户修改表单控件值（例如通过在文本输入中键入文本、在选择框中选择任何选项等）时会触发表单事件。这里有一些最重要的表单事件和 他们的事件处理程序。
焦点事件（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 事件处理程序来处理模糊事件。 以下示例将在文本输入元素失去焦点时向您显示警告消息。
<input type="text" onblur="alert('Text input loses focus!')">
<button type="button">Submit</button>要将焦点从表单元素上移开，请先单击其内部，然后按键盘上的 Tab 键，将焦点放在其他内容上，或单击其外部。
变更事件（onchange）
当用户更改表单元素的值时发生更改事件。
您可以使用 onchange 事件处理程序来处理更改事件。 以下示例将在您更改选择框中的选项时向您显示警告消息。
<select onchange="alert('You have changed the selection!');">
<option>Select</option>
<option>Male</option>
<option>Female</option>
</select>提交事件（onsubmit）
提交事件仅在用户在网页上提交表单时发生。
您可以使用 onsubmit 事件处理程序来处理提交事件。 以下示例将在将表单提交到服务器时向您显示一条警报消息。
<form action="action.asp" 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）
当网页在网络浏览器中完成加载时发生加载事件。
您可以使用 onload 事件处理程序来处理加载事件。 以下示例将在页面完成加载后立即向您显示一条警报消息。
<body onload="window.alert('Page is loaded successfully!');">
<h1>This is a heading</h1>
<p>This is paragraph of text.</p>
</body>卸载事件（onunload）
当用户离开当前网页时发生卸载事件。
您可以使用 onunload 事件处理程序来处理卸载事件。 以下示例将在您尝试离开页面时向您显示警告消息。
<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 事件处理程序来处理调整大小事件。 以下示例将在您将浏览器窗口的大小调整为新的宽度和高度时向您显示一条警告消息。
<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>