iT邦幫忙

2026 iThome 鐵人賽

DAY 26
0

今天要分享我學到的內容是 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 全部串起來了!


上一篇
Day 25|函式 Function
下一篇
Day 27|DOM 操作:HTML、CSS、JS 終於接起來!
系列文
美術生的前端初體驗 : 從畫畫到網頁的30天 共 27 篇
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言