到目前為止，我們已經會用 函式 來打包程式邏輯。
但問題來了——要怎麼讓這些函式「自動啟動」？🤔

答案就是：事件 (Event)！

事件是網頁互動的靈魂 ❤️
只要偵測到使用者「做了什麼事」（點擊、輸入、移動滑鼠…），
JavaScript 就可以馬上做出反應。

1. 什麼是事件？

事件（Event）就是「使用者的動作」：

•點擊按鈕

•滑鼠移入或移出

•鍵盤輸入文字

•表單送出

•畫面載入完成

這些行為都能讓網頁「有感覺」，不再只是靜態的展示。

2. 綁定事件的兩種方式

(1) HTML 內嵌方式

直接在 HTML 裡寫上事件屬性（快速但不建議太多用）。

<button onclick="sayHi()">點我打招呼</button>

<script>
  function sayHi() {
    alert("哈囉！👋");
  }
</script>

(2) JavaScript 監聽方式（建議）

用 addEventListener() 綁定事件。

<button id="btn">點我</button>

<script>
  const btn = document.getElementById("btn");
  btn.addEventListener("click", () => {
    alert("你按到我啦 🎉");
  });
</script>

優點：

•HTML 乾淨

•可以綁多個事件

•更容易維護

3. 改變畫面內容

我們可以在事件觸發後，改變文字、樣式、圖片。

範例：點按鈕改文字

<h2 id="msg">點按鈕看看！</h2>
<button id="changeBtn">點我</button>

<script>
  const msg = document.getElementById("msg");
  const btn = document.getElementById("changeBtn");

  btn.addEventListener("click", () => {
    msg.textContent = "被你點到了！😎";
    msg.style.color = "deepskyblue";
  });
</script>

4. 輸入事件：即時顯示輸入內容

<input id="name" placeholder="輸入你的名字">
<p>哈囉，<span id="preview">陌生人</span>！</p>

<script>
  const input = document.getElementById("name");
  const preview = document.getElementById("preview");

  input.addEventListener("input", () => {
    preview.textContent = input.value || "陌生人";
  });
</script>

這種「即時反應」的互動感，是很多表單、聊天介面的基礎！

5. 多個事件一起使用

範例：滑鼠移入／移出效果

<button id="hoverBtn">滑鼠移過我看看 👀</button>

<script>
  const hoverBtn = document.getElementById("hoverBtn");

  hoverBtn.addEventListener("mouseover", () => {
    hoverBtn.style.background = "deepskyblue";
    hoverBtn.style.color = "white";
  });

  hoverBtn.addEventListener("mouseout", () => {
    hoverBtn.style.background = "";
    hoverBtn.style.color = "";
  });
</script>

今日實戰

(1) 點擊切換主題（亮／暗模式）

<style>
  body.dark {
    background: #111;
    color: white;
    transition: 0.3s;
  }
</style>

<button id="themeBtn">切換主題 🌙</button>

<script>
  const themeBtn = document.getElementById("themeBtn");
  themeBtn.addEventListener("click", () => {
    document.body.classList.toggle("dark");
    themeBtn.textContent =
      document.body.classList.contains("dark") ? "切換主題 ☀️" : "切換主題 🌙";
  });
</script>

(2) 點擊次數計數器

<button id="countBtn">點我</button>
<p>你已經點了 <span id="count">0</span> 次</p>

<script>
  let count = 0;
  const btn = document.getElementById("countBtn");
  const display = document.getElementById("count");

  btn.addEventListener("click", () => {
    count++;
    display.textContent = count;
  });
</script>

(3) 即時留言顯示區

<input id="message" placeholder="輸入訊息">
<p>你的留言：<span id="output"></span></p>

<script>
  const message = document.getElementById("message");
  const output = document.getElementById("output");

  message.addEventListener("input", () => {
    output.textContent = message.value;
  });
</script>

今日小結

•事件 (Event)：讓網頁「會回應」使用者的行為。

•addEventListener() 是最推薦的綁定方式。

•學會了：

• 點擊事件 (click)

• 輸入事件 (input)

• 滑鼠事件 (mouseover / mouseout)

•實作了：

• 切換主題 🌙☀️

• 點擊計數器 🔢

• 即時留言顯示 💬

明天（Day 21）我們要學會更強大的能力 —— 操控整個畫面 (DOM 操作)，直接改變頁面裡的元素、屬性、樣式 🖼️✨。