JavaScript 事件處理
`addEventListener()` 可以將事件處理函式綁定到 HTML 標籤上，例如點擊、滑鼠移入、輸入文字或表單送出等事件。
## 基本語法
```javascript
元素.addEventListener("事件名稱", 事件處理函式);
```
例如：
```javascript
const button = document.querySelector("#myButton");
button.addEventListener("click", function () {
console.log("按鈕被點擊了！");
});
```
也可以使用箭頭函式：
```javascript
button.addEventListener("click", () => {
console.log("按鈕被點擊了！");
});
```
相較於直接在 HTML 標籤中使用 `onclick`，`addEventListener()` 可以將 HTML 與 JavaScript 分離，且同一個元素可以加入多個事件處理函式。
---
## 範例一：點擊按鈕修改文字
### HTML
```html
<button id="changeTextButton">修改文字</button>
<p id="message">原本的文字</p>
```
### JavaScript
```javascript
const button = document.querySelector("#changeTextButton");
const message = document.querySelector("#message");
button.addEventListener("click", () => {
message.textContent = "文字已經被修改！";
});
```
當使用者點擊按鈕時，`click` 事件會被觸發，並將段落的內容改成新的文字。
---
## 範例二：輸入文字時即時顯示內容
### HTML
```html
<input type="text" id="nameInput" placeholder="請輸入姓名">
<p>你好，<span id="nameOutput">訪客</span>！</p>
```
### JavaScript
```javascript
const nameInput = document.querySelector("#nameInput");
const nameOutput = document.querySelector("#nameOutput");
nameInput.addEventListener("input", (event) => {
const name = event.target.value;
if (name.trim() === "") {
nameOutput.textContent = "訪客";
} else {
nameOutput.textContent = name;
}
});
```
`input` 事件會在使用者輸入內容時觸發。透過 `event.target.value` 可以取得輸入框目前的文字，並即時更新畫面。
---
## 常見事件名稱
| 事件名稱 | 說明 |
|---|---|
| `click` | 使用者點擊元素 |
| `mouseover` | 滑鼠移入元素 |
| `mouseout` | 滑鼠移出元素 |
| `input` | 輸入框內容改變 |
| `change` | 表單欄位值改變並完成選取 |
| `submit` | 表單送出 |
| `keydown` | 按下鍵盤按鍵 |
若 JavaScript 放在 `<head>` 中，建議等 HTML 載入完成後再取得標籤：
```javascript
document.addEventListener("DOMContentLoaded", () => {
// 在這裡加入事件處理程式
});
```
相關學習地圖、教學課程
F2E 網站前端工程