JavaScript 已找到按鈕，今天要接住使用者每一次點擊。

前一天已經用 getElementById() 找到狀態區與按鈕，前端程式知道畫面上有哪些元素。

今天要替按鈕加上 click 事件，先把點擊結果印到 Console，確認瀏覽器能接住使用者操作。

瀏覽器以事件驅動互動

網頁程式不會一直詢問按鈕是否被按下，而是先登記一個 click callback，平常保持等待，當使用者操作時才執行指定函式。

這與 MPU 的 App.run() 概念相似，兩者都屬於事件驅動，但執行位置不同，JavaScript callback 在瀏覽器執行，Python callback 則在 MPU 上處理 Bridge 或 WebUI 事件。

登記 click 監聽器

在 assets/app.js 的元素參照後加入以下程式。

const statusEl = document.getElementById("status");
const toggleBtn = document.getElementById("toggle-btn");

toggleBtn.addEventListener("click", () => {  // 本日新增
  console.log("切換按鈕被點擊");  // 本日新增
});  // 本日新增

addEventListener() 的第一個參數是事件名稱 "click"，第二個參數是事件發生時要執行的函式。

這裡使用箭頭函式 () => { ... }，括號表示目前不需要接收參數，大括號內則放入點擊後要執行的內容。

事件監聽器保存的是函式本身，因此寫成 () => { ... }，而不是在登記時就把要做的事情提前執行，這與 Python callback 先定義、收到事件後才被呼叫的概念一致。

callback 不會在載入時執行

重新整理頁面時，JavaScript 只完成事件登記，不會立刻印出「切換按鈕被點擊」，直到使用者真正點擊按鈕，callback 才會被瀏覽器呼叫。

若頁面一開啟就出現大量點擊訊息，代表程式可能直接呼叫了函式，而不是把函式交給事件監聽器，本日程式應維持等待使用者操作。

用 Console 驗證事件次數

開啟瀏覽器 Console，點擊按鈕一次應新增一行訊息，連續點擊五次則新增五行，每一次操作都與一筆輸出對應。

按住按鈕不放時，click 通常在完成一次按下與放開後產生，不會像 MCU 未處理下降緣時那樣持續切換，瀏覽器按鈕與實體接點的事件來源不同。

若點擊完全沒有輸出，先確認 toggleBtn 不是 null，再檢查事件名稱、括號與大括號是否完整，不必先修改 Python 或 MCU。

重新整理頁面後監聽器會重新登記一次，正常程式每次點擊只應出現一筆訊息，若同一操作出現多筆輸出，應檢查 app.js 是否被 HTML 重複載入，或程式是否重複呼叫 addEventListener()。

點擊後仍不能自行改畫面

今天 callback 只印出除錯訊息，不修改 statusEl.textContent，也不將 class 從 off 改成 on，因為瀏覽器尚未把命令送到 MCU，更不知道硬體是否成功切換。

即使未來接上 Socket.IO，點擊時也只會送出要求，頁面仍必須等待 MCU 回報後才更新，這能避免網頁先顯示 ON，實體 LED 卻沒有動作。

MCU 與 MPU 不受影響

執行前端 click 測試時，Python Edge Service 仍保持待命，D9 按鈕也應繼續控制 D2，瀏覽器 Console 的訊息不會穿過網路進入 Python。

這項分層測試的目的，是先確認 JavaScript 能接收使用者操作，再於下一篇單獨建立 Web 到 MPU 的訊息路徑，問題發生時才容易判斷位於哪一層。

完成測試後應保留 click callback 與 Console 訊息，下一篇加入 Socket.IO 時可先確認點擊仍被接住，再觀察事件是否繼續抵達 Python，避免一次跨兩層卻沒有中間證據。

點擊十次時也應得到十筆輸出，不多也不少。

每次點擊都只執行一次 callback，才表示事件監聽器設定正確。

本篇完成內容

• 使用 addEventListener() 監聽 click。
• 以箭頭函式建立前端 callback。
• 透過 Console 驗證點擊次數。
• 保持點擊後不自行改變 ON／OFF。

現在瀏覽器已能接住點擊事件，但命令仍停在前端，下一篇要把 toggle_led 送到 Python，再由 MPU 轉交給 MCU。

下一篇｜把前端 Web 操作送到後端 Python