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

📜 這裡的修煉規則：

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

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

記住...

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

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

「導師，我已經在迷宮門口佈下陷阱了，但我該如何監視它有沒有被踩中？」

我笑了笑說：「冒險者，身為專業的戰場指揮官，你並不用整天盯著門口。你只需要在那裡留下一個 『自鳴笛 (addEventListener)』。隨便他什麼時候踩，笛聲會自動響起，還會傳回一份報案單，告訴你是誰踩的、在哪個座標踩的。」今天，我們要學習如何把「被動的代碼」轉換為「主動的機制」，讓瀏覽器學會等待。

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

1. 陷阱觸發器 (Event Listener)

網頁互動的核心就是「監聽」。語法結構：target.addEventListener('type', listener)。

• target (標靶)：安裝點 (如按鈕)。
• type (信號)：行為 (click, input, change)。
• listener (應對)：觸發後執行哪個計畫。

const btn = document.querySelector("#submit");
btn.addEventListener("click", (e) => {
  console.log("事件對象報案：", e.target);
});

2. 常用事件與 e.target

當陷阱被踩中，系統會生成一份「報案單 (Event Object)」。裡面的 e.target 是最有用的線索，它代表「真正觸發事件」的那個標籤。

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

招式示範：現代化的互動監聽

❌ 冒險學弟：在 HTML 亂塞髒手印 (onclick)

• 負能量評級：🔴 代碼強耦合 / 🔴 難以維護

<button onclick="attack()">發動攻擊</button>

✅ 勇者學長：乾淨的技術掛載 (addEventListener)

• 利潤評級：🟢 結構清晰 / 🟢 支援多重監聽

const btn = document.querySelector("#attack-btn");
btn.addEventListener("click", (e) => {
  e.target.textContent = "冷卻中...";
});

3. 邏輯流向圖解

導師的圖解心法： 事件監聽就像是在 NPC 身上掛載了一個 「感應器」。平常它只是在那裡安安靜靜地待著，直到「外部力量（Click、Input...）」觸發了它的感應範圍，它才會瞬間啟動你事先設定好的 「反擊魔法（Callback）」。

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

阻止本能動作：e.preventDefault()

有些 HTML 元素有自己的「生存本能」。例如 <form> 提交時會跳頁、<a> 點擊後會跑網址。身為職人，你可以發布 「強制令」，阻止這些本能動作，讓頁面維持在你的邏輯控制之下。

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

孩子，導師教你一個保命守則：「不要在 HTML 標籤裡寫 JavaScript。」

外觀歸 HTML，邏輯歸 JavaScript。這不僅是為了漂亮，更是為了讓你的隊友在維護代碼時，不需要像偵探一樣在不同的檔案間跳來跳去抓兇手。

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

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

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

• addEventListener：在標籤上掛一個警笛。
• e.target：真正觸發事件的產物。
• e.preventDefault()：攔截瀏覽器的自動跳轉本能。

🎯 【實戰演武場】

• 📜 本日實戰任務：互動陷阱與監聽儀式 (CodePen)
• 🛡️ 任務達成證明：QuestBoard 公會報到處

⚔️ 任務鑑定條件：

1. 完成 📜 本日實戰任務 (CodePen)。
2. 將 CodePen 網址貼至 QuestBoard，並回填鑑定報告：
   • 初心者：互動覺醒鑑定 (成就感發掘)：
     • 1. 當你看見按鈕點下去後，瀏覽器真的說出你寫的咒語時，有沒有感受到一種「掌控世界互動」的快感？
   • 冒險者：垃圾堆之謎 (理性挑戰)：[⚡ 觀念辨析]
     • 1. 如果一個 NPC 已離開地圖 (移除 DOM)，但我們忘了「拆掉他的監聽器」，這會造成什麼後果？
3. 任務完成後，你的名字將永遠標記在公會的英雄榜上！

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

• MDN 官方文獻： Document.addEventListener() 詳解