昨天我們學會了用 JavaScript 去抓取網頁上的元素，並且動態修改它的文字或顏色。但你會發現：這些改變都是一打開網頁就瞬間發生的，使用者根本來不及參與！

如果今天我們要做到：「當使用者點擊按鈕時，才彈出視窗」、「當滑鼠移過去時，圖片放大」，該怎麼做呢？

今天我們就要來解鎖網頁互動的關鍵鑰匙——事件監聽（Event Listener）！

什麼是事件監聽？就像在網頁上裝「監視器」

在現實生活中，我們常說「當電話響了（事件），我就去接電話（動作）」。
在網頁的世界裡也是一樣的概念：

• 事件（Event）：叫 JavaScript 隨時盯著某個按鈕，只要這個動作一發生，就立刻執行我們指定的程式碼！
• 監聽（Listener）：叫 JavaScript 隨時盯著某個按鈕，只要這個動作一發生，就立刻執行我們指定的程式碼！
  這跟在 Figma 裡拉互動原型（Prototype）時，設定 Interaction：On click → Navigate to... 的邏輯是差不多的！

程式碼怎麼寫？三步驟搞定互動

在 JS 裡，我們最常使用 .addEventListener() 來幫元素加上監聽器：

// 1. 先把畫面上的按鈕抓下來
const myButton = document.querySelector('#submit-btn');

// 2. 幫按鈕裝上「點擊事件」的監聽器
myButton.addEventListener('click', function() {
    // 3. 當按鈕被點擊時，要執行的程式碼放這裡
    alert('太棒了！你剛剛點擊了按鈕！');
    console.log('使用者點擊了按鈕');
});

拆解程式碼:

1. myButton：我們選中的目標按鈕。
2. 'click'：監聽的事件種類（這裡代表滑鼠點擊）。
3. function() { ... }：回呼函式（Callback Function），也就是事件發生「當下」要觸發執行的任務。

常見的互動事件

1. 'click'：點擊（按鈕、選單切換最常用）。
2. 'mouseenter' / 'mouseleave'：滑鼠移入與移出（常用在圖片 hover 特效）。
   3. 'input'：當使用者在輸入框（Input）打字時即時觸發（可用來做即時搜尋或密碼長度檢查）。

今日小結

今天我們學會了用 Event Listener（事件監聽），讓網頁不再只是被動展示，而是能夠即時回應使用者的每一個點擊與操作。

掌握了事件監聽後，明天我們要來介紹如何用迴圈（Loop），輕鬆自動生成一整排卡片清單，不用再呆呆地複製貼上 HTML 囉！