今天要分享我學到的內容是 JavaScript 裡的開關靈魂——Event(事件)!
網頁上的事件無所不在,例如:
click:使用者點擊了按鈕或圖片。input:使用者在輸入框裡打字。keydown:使用者按下了鍵盤。而 JS 裡的 addEventListener(事件監聽器),就像是在按鈕上面裝了一個哨兵,專門監視「這個動作發生了沒」。
把 HTML 按鈕與 JS 監聽器接起來:
// 1. 抓到網頁上的按鈕元件
const submitBtn = document.querySelector("#submitBtn");
// 2. 幫按鈕加上監聽器:當「點擊(click)」發生時,執行後面的動作
submitBtn.addEventListener("click", function() {
console.log("使用者按下了送出按鈕!");
});
這概念就像是在開關與電燈之間鋪設電線,例如:
打包好的「檢查密碼工具」,綁定在「點擊按鈕」這個事件上。只要使用者一按下按鈕,網頁就會立刻執行檢查!
感覺到了這一步,才真正變成了「活的互動系統」。
Day 26,搞懂了 Event 與 addEventListener 的互動機制。
擁有了變數、判斷、函式與事件,下一步就要把 HTML、CSS 與 JS 全部串起來了!