Day15：JavaScript 事件處理 (Event Handling) 進階

2025 iThome 鐵人賽

DAY 13

Modern Web

Modern Web：從基礎、框架到前端學習系列第 15 篇

17th鐵人賽

zoeeyee

2025-09-29 01:14:48

80 瀏覽

分享至

學習目標

了解什麼是事件 (Event)與事件監聽器 (Event Listener)。
學會使用addEventListener綁定多個事件。
學會事件物件 (Event Object) 的使用，例如event.target。
做一個互動式小工具 (輸入文字 → 即時顯示)。

理論講解

1.常見事件種類

滑鼠事件：click、dblclick、mouseover、mouseout、mousedown、mouseup
鍵盤事件：keydown、keyup、keypress
表單事件：input、change、submit
其他事件：scroll、resize、load

2.基本語法

element.addEventListener("事件名稱", function(event) {
  // 事件觸發後執行的程式
});

3.事件物件

document.querySelector("button").addEventListener("click", function(event) {
  console.log(event.target); // 觸發事件的元素
});

實作練習：即時輸入顯示

檔名：day15_event.html

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Day15 - 事件處理</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
    }
    input {
      padding: 8px;
      width: 200px;
    }
    p {
      margin-top: 15px;
      font-size: 18px;
      color: darkblue;
    }
  </style>
</head>
<body>
  <h1>事件處理練習</h1>
  <input type="text" id="nameInput" placeholder="請輸入你的名字">
  <p id="displayText">這裡會顯示輸入的文字</p>

  <script>
    // 取得元素
    const input = document.getElementById("nameInput");
    const display = document.getElementById("displayText");

    // 綁定 input 事件
    input.addEventListener("input", function(event) {
      // event.target.value 取得輸入框的值
      display.textContent = "你好，" + event.target.value + "！";
    });

    // 綁定 keydown 事件
    input.addEventListener("keydown", function(event) {
      console.log("你按下的鍵是：" + event.key);
    });
  </script>
</body>
</html>