今天我們要聊的是事件機制，
也就是説，當使用者做出動作時，瀏覽器怎麼反應？

舉個例子：
點一下按鈕 → 顯示一段文字
滑鼠移過圖片 → 變模糊
送出表單 → 阻止跳頁

這些動作背後，全部都靠「事件機制」在運作。

今日的目標：

• 熟悉addEventListener
• 了解事件綁定、事件物件、事件委派
• 阻止預設行為：preventDefault()

一、事件綁定 Event Binding

事件綁定就是告訴瀏覽器，當某個事件發生時要做什麼

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

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

  btn.addEventListener("click", () => {
    alert("你點到我啦");
  });
</script>

addEventListener("click", ...)意思是：
「當這個元素被點擊（click）時，執行裡面的程式」~
click也可以改成 "mouseover"（滑過）、"keydown"（按鍵） 等等。

二、事件物件 Event Object

當事件發生時，瀏覽器會自動產生一個「事件物件」，
裡面裝著各種有用資訊，比如你點了哪個按鈕、滑鼠位置在哪等等。

而瀏覽器之所以「自動建立事件物件」，就是因為我們先用 addEventListener 告訴它要監聽事件。
其實addEventListener就是在對瀏覽器說：
幫我注意一下這個按鈕，只要有人點它請通知我，
並把這次事件的詳細資料（event）給我。

btn.addEventListener("click", (event) => {
  console.log(event.target);  // 被點擊的元素
});

於是瀏覽器在點擊發生時：

1. 產生一個「事件物件」 (event)
2. 裝入各種資料（如哪個元素被點、滑鼠座標、按下時間…）
3. 把它傳進你註冊的那個函式（callback function）裡

所以 (event) 是瀏覽器在呼叫時自動傳進來的參數
event.target 指的就是「哪個元素觸發了事件」。

三、阻止預設行為：preventDefault()

有時候，我們不希望瀏覽器執行預設動作

例如：

<a href="https://google.com" id="link">去 Google</a>

<script>
  document.querySelector("#link").addEventListener("click", (e) => {
    e.preventDefault(); // 阻止跳轉
    alert("不讓你去 😆");
  });
</script>

原本會打開 Google，但因為我們用了 preventDefault()，所以被阻止了

四、事件委派

假設我們有一堆 li：

<ul id="list">
  <li>蘋果</li>
  <li>香蕉</li>
  <li>芒果</li>
</ul>

如果要讓每個 li 都能被點擊，
不用一個一個綁事件，
可以直接綁在外層的 ul 上：

const list = document.getElementById("list");

list.addEventListener("click", (e) => {
  if (e.target.tagName === "LI") {
    alert(`你點了 ${e.target.textContent}`);
  }
});

這就是「事件委派」：
事件由外層負責，根據觸發目標來判斷要做什麼。
這樣更有效率、程式也更乾淨。