基本事件處理
在 HTML 標籤中加入事件處理，最常見的方式是使用 `on...` 屬性，例如：
```html
<button onclick="sayHello()">按鈕</button>
```
當使用者點擊按鈕時，會執行 `sayHello()` 函式。
## 一、基本語法
```html
<標籤事件名稱="JavaScript 程式碼">
```
例如：
```html
<button onclick="alert('你好！')">點擊我</button>
```
也可以呼叫 JavaScript 函式：
```html
<button onclick="showMessage()">顯示訊息</button>
<script>
function showMessage() {
alert('這是按鈕事件！');
}
</script>
```
事件處理函式也可以接收事件物件：
```html
<button onclick="handleClick(event)">點擊</button>
<script>
function handleClick(event) {
console.log(event);
}
</script>
```
## 二、常見事件種類
| 事件 | 發生時機 |
|---|---|
| `onclick` | 使用者點擊元素 |
| `ondblclick` | 使用者雙擊元素 |
| `onmouseover` | 滑鼠移入元素 |
| `onmouseout` | 滑鼠移出元素 |
| `onmousedown` | 按下滑鼠按鍵 |
| `onmouseup` | 放開滑鼠按鍵 |
| `onkeydown` | 按下鍵盤按鍵 |
| `onkeyup` | 放開鍵盤按鍵 |
| `oninput` | 輸入欄位內容發生變化 |
| `onchange` | 表單欄位值變更並失去焦點，或選項改變 |
| `onsubmit` | 表單送出前 |
| `onfocus` | 元素取得焦點 |
| `onblur` | 元素失去焦點 |
| `onload` | 頁面或資源載入完成 |
## 實務範例 1：點擊按鈕顯示或隱藏內容
```html
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<title>顯示與隱藏內容</title>
</head>
<body>
<button onclick="toggleContent()">顯示／隱藏說明</button>
<p id="description">
這是一段可以被顯示或隱藏的說明文字。
</p>
<script>
function toggleContent() {
const description = document.getElementById('description');
if (description.style.display === 'none') {
description.style.display = 'block';
} else {
description.style.display = 'none';
}
}
</script>
</body>
</html>
```
這裡使用 `onclick`，點擊按鈕時執行 `toggleContent()`，再透過 `style.display` 控制文字顯示狀態。
## 實務範例 2：表單送出前進行驗證
```html
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<title>表單驗證</title>
</head>
<body>
<form onsubmit="return validateForm()">
<label>
使用者名稱：
<input type="text" id="username">
</label>
<br><br>
<label>
電子郵件：
<input type="email" id="email">
</label>
<br><br>
<button type="submit">送出</button>
</form>
<script>
function validateForm() {
const username = document.getElementById('username').value.trim();
const email = document.getElementById('email').value.trim();
if (username === '' || email === '') {
alert('請填寫所有欄位！');
return false; // 阻止表單送出
}
alert('表單驗證成功！');
return true; // 允許表單送出
}
</script>
</body>
</html>
```
`onsubmit="return validateForm()"` 的作用如下：
- 回傳 `true`：允許表單送出。
- 回傳 `false`：取消表單送出。
- 常用於送出前檢查欄位內容。
## 補充：使用 JavaScript 設定事件
除了直接寫在 HTML 標籤中，也可以使用 DOM 屬性設定事件，但同樣不需要 `addEventListener`：
```html
<button id="myButton">點擊我</button>
<script>
document.getElementById('myButton').onclick = function () {
alert('按鈕被點擊了！');
};
</script>
```
不過，直接把 JavaScript 寫在 HTML 的 `onclick` 等屬性中雖然簡單，當專案變大時會較難維護。實務上通常會將事件處理程式集中放在 JavaScript 檔案中。
相關學習地圖、教學課程
F2E 網站前端工程