Solution · code-edit

bubbling 與 delegation

對照完整答案、責任邊界與原因。

Solution 要做什麼

對照完整答案、責任邊界與原因。

本主題檔案：files/main.js

定位：先確認 click 是否 bubbles 到 container。

頁面不會替你修改檔案；請在實作檔完成後重新整理確認。

container 有兩個按鈕但沒有 child listener。

listenerCount=1、handledCount=2、lastTarget 為第二個按鈕。

container.addEventListener('click', e => e.target.closest('button'))。

只在本階段資料夾內操作，避免改到其他章節。

index.html
入口 HTML：提供完整的 menuButton、site-nav、FAQ button、answer 與 aria 關係；Starter 不要求學生重建 HTML。
style.css
呈現層：控制 hidden、focus、FAQ 與窄版可讀性；不把事件邏輯放進 CSS。
main.js
行為層：用 addEventListener 處理選單與 FAQ，讓 aria 狀態和 hidden 狀態同步。
services.html
目的頁：只提供導覽可到達的內容，不載入首頁互動 main.js。

證據：listenerCount=1、handledCount=2、currentTarget=container