LESSON-17 · SELF-PACED PRACTICE

事件傳遞與焦點歸還

把「事件傳遞與焦點歸還」拆成 4 個可獨立完成、可重設、可驗證的自主學習 module。

4個獨立主題3個練習階段1個整合挑戰
看見缺口 → 修改一小段 → 重新載入驗收

每一個 topic 都有自己的檔案、Starter、Checkpoint、Solution 與證據清單。

先知道今天要做什麼

不要從長篇名詞開始;先從第一個可完成的小任務開始。

01

選一個 topic

從第一張卡開始,先閱讀任務情境與預期畫面。

02

修改自己的檔案

打開 Starter 的實作檔,依 Step 逐步修改,不靠按鈕代做。

03

用證據驗收

重新整理頁面,對照畫面、DOM、Computed、Console 或文件證據。

4 個獨立主題

每張卡只練一個責任;完成後再進入下一張。

01

event object

能從事件物件讀取 type、target 與鍵盤 key,讓 handler 依實際事件分流。

要修改:files/starter/main.js

02

target 與 currentTarget

能區分最初觸發節點與目前執行 listener 的節點。

要修改:files/starter/main.js

03

bubbling 與 delegation

能用父層單一 listener 處理既有與動態加入的 FAQ 按鈕。

要修改:files/starter/main.js

04

Escape 關閉與焦點歸還

能讓鍵盤使用者按 Escape 關閉內容後回到原控制項。

要修改:files/starter/main.js

最後整合挑戰

把已完成的責任轉回本章完整作品,不把整合步驟冒充成單項教學。

第一個建議動作

如果你現在只想知道下一步,先做這件事。

開啟「event object」:先看 files/starter/main.js 的 先在 handler 第一行輸出 event.type。,記錄目前狀態,再修改一小段。