## Event Object（事件物件）是什麼？ 在 JavaScript 中，當使用者或瀏覽器觸發事件時，例如： - 點擊按鈕 - 移動滑鼠 - 按下鍵盤 - 提交表單 瀏覽器會自動建立一個「事件物件」，並將它傳入事件處理函式中。通常會以 `event` 或 `e` 表示。 ```javascript element.addEventListener("click", function (event) { // event 就是事件物件 }); ``` ## Event Object 的功用 事件物件可以提供事件發生時的詳細資訊，例如： | 屬性／方法 | 功用 | |---|---| | `event.target` | 取得實際觸發事件的元素 | | `event.type` | 取得事件類型，例如 `click` | | `event.key` | 取得使用者按下的鍵 | | `event.clientX`、`event.clientY` | 取得滑鼠在視窗中的座標 | | `event.preventDefault()` | 阻止瀏覽器的預設行為 | | `event.stopPropagation()` | 阻止事件繼續冒泡 | --- ## 範例一：取得被點擊的按鈕 ```html <button class="btn">第一個按鈕</button> <button class="btn">第二個按鈕</button> <script> const buttons = document.querySelectorAll(".btn"); buttons.forEach(function (button) { button.addEventListener("click", function (event) { console.log("你點擊的是：", event.target.textContent); console.log("事件類型：", event.type); }); }); </script> ``` ### 說明 - `event.target` 代表實際被點擊的按鈕。 - `event.target.textContent` 可以取得按鈕文字。 - `event.type` 會得到 `"click"`。 這種方式適合用於選單、按鈕群組或動態操作介面。 --- ## 範例二：阻止表單空白送出 ```html <form id="loginForm"> <input id="username" type="text" placeholder="請輸入帳號"> <button type="submit">登入</button> </form> <script> const form = document.querySelector("#loginForm"); form.addEventListener("submit", function (event) { const username = document.querySelector("#username").value; if (username.trim() === "") { event.preventDefault(); alert("請輸入帳號後再送出！"); } }); </script> ``` ### 說明 - 表單送出時會觸發 `submit` 事件。 - 瀏覽器原本會直接送出表單。 - 使用 `event.preventDefault()` 可以阻止預設送出行為。 - 因此可以先進行欄位檢查，確認資料正確後再送出。 總結來說，Event Object 就像是事件發生時附帶的「事件資訊包」，可以幫助程式了解事件來源、事件類型，以及控制瀏覽器的預設行為。