本文同步分享於個人部落格：Liwen Chiou | Digital Architect & Full-Stack Engineer

📜 這裡的修煉規則：

孩子，在踏上今日的領地前，先坐下來喝杯酒吧。
修煉的路很長，別急著奔跑，先聽聽這份卷軸裡的古老叮嚀。

我在每一站的盡頭都為你鋪設了 「實戰演武場 CodePen」。那不只是程式碼的拼湊，而是你在這場暴風雨中，試圖用邏輯點燃的一顆星火。
成功突圍後，別忘了帶著你的戰利品回到 「QuestBoard 佈告欄」。在那裡，你會發現自己從不孤單，公會的夥伴們都正舉杯等待你的歸來。

記住...

「 導師看重的從來不是你的劍法有多華麗，而是當你被邏輯擊潰、滿身泥濘後，依然選擇握緊理性的劍柄，再次向真相發起衝鋒的勇氣。 」

🛡️ 【公會大廳：導師的修煉導讀】

「導師，公會看板上新貼了 100 個任務，難道我要幫每個任務都配一個監聽士兵嗎？這樣我會累死、記憶體會爆掉啊！」

我指著看板中心的大聲公說：「冒險者，身為專業的總管，你只需要在『公會門口 (父元素)』站一個人就夠了。只要有人踩在任意任務卡片上，聲音會一路『傳上來 (Bubble)』。你只要站在高處聽，就能知道是誰、在幹嘛。這就是高效管理的神技：事件委派。」

💡 【導師講義：底層真相探究】

1. 事件冒泡 (Event Bubbling)

當你點擊一個按鈕時，這個點擊事件並非只停留在按鈕上。它會像水底噴出的氣泡一樣，一路向外（向上）傳遞，經過父元素、阿公元素，直到 document。

2. 事件委派的核心：一人領信

利用冒泡，我們只要在父層容器掛載一個監聽器：

• e.target：真正觸發事件的那個最底層元素（你的目標）。
• e.currentTarget：掛載監聽的那個父容器。

🛠️ 實戰語法：守株待兔

const list = document.querySelector(".button-list");

list.addEventListener("click", function (e) {
  // 透過 e.target.closest 擊中目標
  const targetBtn = e.target.closest(".btn");
  if (targetBtn) {
    console.log("點中目標按鈕了！");
  }
});

⚔️ 【戰術對抗：學長與學弟的代碼對決】

招式示範：一人管理整支軍隊

❌ 冒險學弟：勞民傷財的個體監聽

• 負能量評級：🔴 浪費記憶體 / 🔴 動態新增的元素會失效

const items = document.querySelectorAll('.item');
items.forEach(i => i.addEventListener('click', () => {...}));

✅ 勇者學長：父層大聲公委派

• 利潤評級：🟢 效能頂尖 / 🟢 支援未來新增的元素

document.querySelector("#parent").addEventListener("click", (e) => {
  if (e.target.nodeName === "LI") {
    console.log("子項目被點擊了");
  }
});

3. 邏輯流向圖解

導師的圖解心法： 委派术就是 「大聲公管理術」。與其給 100 個冒險者每人配一台對講機，不如直接在營火中央放一台最強的大聲公。只要有人在大地圖範圍內發生點擊，大聲公就會捕捉到訊號，並詢問：「你是誰？你要領信嗎？」

🏰 【勇者精英課：邁向職人的進階架構】

為什麼委派能處理「未來的人」？

很多冒險者發現，當他們用 JS 動態新增了任務卡片後，原本掛載的監聽器就失靈了。那是因為那些士兵只負責盯著「當時就在場」的人。

委派術的奧祕： 只要大聲公（父監聽器）還在，它管的是整個「時空區域」。不管新加入的人是誰，只要他產生的訊號傳上來，大門警衛依然能精準捕獲，這就是大型效能優化的職人技術。

🛖 【營火叮嚀：導師的經驗談】

孩子，導師教你一個職人密技：「判斷 nodeName 時要用大寫。」

在原生 JS 偵訊單中，e.target.nodeName 傳回的通常是 BUTTON 或 LI。養成這個小習慣，能讓你避開許多初學者會踩到的「判斷無效」坑洞。

天色微亮，營火雖已燃盡，但你眼中卻閃爍著領悟的光芒。在前往演武場挑戰關卡前，我已經幫你把靈魂碎片精煉成了這份「戰術錦囊」。拿好它，今日的任務不再是負擔。

📝 【夥伴筆記：今日修煉精華】

這份筆記是你的隨身護身符，卡關時看一眼，真相就在裡面。

• 事件冒泡：事件由內而外傳遞。
• 事件委派：父層接管子層所有信號。
• e.target.closest()：從點擊點向上尋找指定標籤的溯源魔法。

🎯 【實戰演武場】

• 📜 本日實戰任務：一人領信，全家收件 (CodePen)
• 🛡️ 任務達成證明：QuestBoard 公會報到處

⚔️ 任務鑑定條件：

1. 完成 📜 本日實戰任務 (CodePen)。
2. 將 CodePen 網址貼至 QuestBoard，並回填鑑定報告：
   • 初心者：代勞者鑑定 (成就感發掘)：
     • 1. 今天成功讓「爸爸 (父元素)」代領了「兒子 (子元素)」的信件後，有沒有感受到代碼變得很簡潔、很有秩序？
   • 冒險者：委派的藝術感 (理性挑戰)：[⚡ 觀念辨析]
     • 1. e.target 與 e.currentTarget 的區別是什麼？在剛才的「冒險小隊名單」中，誰才是真正被滑鼠點到的人？
3. 任務完成後，你的名字將永遠標記在公會的英雄榜上！

📚 【圖書館卷軸：延伸學習】