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>