在昨天的文章中，我們學習了如何使用DOM（document.querySelector）去抓取網頁上的HTML標籤，並透過.style 成功改變了方塊的顏色，但昨天的做法是打開網頁，JavaScript就自動把顏色改掉了。

在實際的網頁中，我們更希望外觀的改變是由使用者來決定的，例如畫面上放一個按鈕，當使用者用滑鼠「點擊」這個按鈕時，方塊才觸發變色。

要讓網頁具備捕捉使用者動作的能力，我們就需要使用前端互動的核心技術：事件監聽（Event Listener）。

什麼是事件監聽

簡單來說，事件監聽就是幫網頁元件安裝一個「動作警報器」。

你告訴瀏覽器：「幫我注意這個按鈕。只要它觸發了特定的動作（例如被滑鼠點擊），就立刻去執行我指定好的那段函式（Function）。」

在JavaScript中，我們主要使用 addEventListener() 這個語法來安裝警報器。

語法標準結構

安裝一個事件監聽需要三個核心要素：

目標元件.addEventListener("事件名稱", 要執行的函式);

1. 目標元件：你想盯緊哪一個標籤？（例如你抓到的那顆按鈕）
2. 事件名稱：你在等待什麼動作？（例如滑鼠點擊"click"、滑鼠移入 "mouseover"）
3. 要執行的函式：動作發生時，要做什麼事？（把昨天學的變色程式碼寫在這裡面）

實作範例

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <title>Day27 DOM 事件監聽實戰</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-family: Arial, sans-serif;
            background-color: #f5f6fa;
            padding-top: 50px;
        }

        /* 預設的方塊外觀灰色 */
        .color-box {
            width: 200px;
            height: 200px;
            background-color: #7f8c8d; /* 預設灰色 */
            margin-bottom: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
            transition: background-color 0.4s ease; 
        }

        /* 按鈕樣式 */
        .btn {
            padding: 10px 20px;
            font-size: 1rem;
            font-weight: bold;
            background-color: #2c3e50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }
        .btn:hover {
            background-color: #34495e;
        }
    </style>
</head>
<body>

    <!-- 定義網頁上的灰色方塊 -->
    <div id="colorBlock" class="color-box"></div>

    <!-- 定義觸發變色的按鈕 -->
    <button id="changeBtn" class="btn">點我變色！</button>

    <script>
        // 先抓到網頁上的方塊與按鈕 
        const targetBox = document.querySelector("#colorBlock");
        const actionBtn = document.querySelector("#changeBtn");

        // 定義變色功能的函式 
        function changeToPurple() {
            // 當這個功能被觸發時，把方塊的背景改成紫色
            targetBox.style.backgroundColor = "#9b59b6";
        }

        // 幫按鈕安裝監聽警報器 
        // 告訴瀏覽器：當actionBtn被"click"(點擊)時，請執行changeToPurple函式
        actionBtn.addEventListener("click", changeToPurple);
    </script>
</body>
</html>

表現介紹

當你將這段程式碼在瀏覽器中打開時，網頁的互動邏輯如下：

• 初始靜態：剛開網頁時，JavaScript雖然已經載入完畢，但因為changeToPurple函式被包在監聽器後面，此時還不會被啟動，方塊維持 CSS 設定的預設灰色。
• 動態觸發：當你的滑鼠游標移到按鈕上並「點擊」下去的瞬間，按鈕上的事件監聽器立刻捕捉到這個動作，並成功呼叫了changeToPurple()。
• 網頁畫面上的方塊隨即從灰色漸變轉為紫色，這代表我們成功將使用者的「實體動作」與JavaScript的「邏輯程式碼」完美串接在一起了。

總結

今天我們成功解鎖了前端網頁互動最重要的語法 addEventListener()（事件監聽），透過將DOM元素抓取、自訂函式與事件名稱（如click）綁定，我們終於做出了第一個真正可以跟使用者互動的動態網頁。
明天（Day 28），我們將要探討初學者在寫變數和函式時最容易踩到的邏輯地雷：作用域（Scope），去看看為什麼有時候在某些地方會莫名其妙抓不到自己宣告的變數，明天見。