11-3 (付費) 事件藝術：事件委派與效能優化

1. 事件冒泡 (Event Bubbling)

當你點擊一個按鈕，點擊事件會像泡泡一樣，從按鈕往上傳給 div、傳給 body、最後傳給 window。

document.body.onclick = () => console.log("Body 被點到了");

2. 事件委派 (Event Delegation) 實戰

如果你有一個購物清單：

const list = document.querySelector("#shopping-list");

// ❌ 錯誤做法：給每個 li 裝監聽器 (浪費記憶體)
// ✅ 專業做法：只給父元素裝一個，再用 e.target 判斷是誰

list.addEventListener("click", (e) => {
  if (e.target.tagName === "LI") {
    console.log(`你點擊了項目：${e.target.textContent}`);
    e.target.classList.toggle("completed");
  }
});

3. 2026 年的高階應用：Passive Listeners

為了讓網頁捲動更流暢，現代瀏覽器支持 passive 參數：

window.addEventListener("scroll", handleScroll, { passive: true });

這告訴瀏覽器：「我保證這個監聽器不會呼叫 preventDefault()」，瀏覽器就可以放心地加速捲動。