1) 事件是什麼？

事件 (Event) 是「發生了某件事」的通知，例如：使用者點擊、輸入文字、捲動頁面、表單送出、圖片載入完成…
JS 透過監聽器 (Event Listener) 來「聽」這些事件，接著執行對應的函式（處理器，handler）。

常見事件：
互動：click、dblclick
輸入：input、change、keyup、keydown
表單：submit
焦點：focus、blur
滑鼠：mouseover、mouseout
視窗：scroll、resize
生命週期：DOMContentLoaded（DOM 建好）、load（資源載完）

2) 綁定事件的三種方式（推薦用法排最前）
a. addEventListener

<button id="btn">點我</button>
<script>
const btn = document.getElementById('btn');
btn.addEventListener('click', () => {
  alert('Hello Sunny!');
});
</script>

優點：可綁多個處理器、可移除、語意清楚、支援事件選項（例如 once）。

b. 屬性方式(常見）

<button id="btn" onclick="sayHi()">點我</button>
<script>
function sayHi(){ alert('Hi!'); }
</script>

缺點：HTML 混入邏輯，不易維護，也無法輕易做事件移除。

c. DOM 屬性指派

<button id="btn">點我</button>
<script>
const btn = document.getElementById('btn');
btn.onclick = () => alert('一次只能有一個 handler');
</script>

3) click、input、change 到底差在哪？

click：按鈕被點擊、核取方塊被點、連結被點
input：輸入框內容一改就觸發（每個字都會觸發）
change：值改變且元素失焦 或 選單選項改變 才觸發
submit：表單被送出（可用來驗證表單並 preventDefault()）

4) 事件物件 event：target、preventDefault()、stopPropagation()

每個處理器都能接到一個事件物件 event（常簡寫 e）。常用屬性/方法：

e.target：實際被操作的元素
e.preventDefault()：阻止預設行為（例如 送出、 跳轉）
e.stopPropagation()：阻止事件冒泡（避免父節點也收到事件）

簡例（阻止連結跳轉）：

<a id="a1" href="https://example.com">不要真的離開</a>
<script>
document.getElementById('a1').addEventListener('click', (e) => {
  e.preventDefault();
  alert('已阻止跳轉，可在這裡做自訂行為');
});
</script>

5) 事件流程：捕獲 → 冒泡（了解就好）

DOM 事件流分為三階段：捕獲 (capturing) → 目標 (target) → 冒泡 (bubbling)。
addEventListener(type, handler, { capture: true }) 可以在捕獲階段觸發。
大多數情況我們用預設（冒泡）即可，事件代理就是利用冒泡做出高效的監聽。