第十八天：事件處理

事件處理是網頁開發中的核心概念，它允許我們對用戶的操作作出反應，像是按下按鈕、輸入文字，還是移動滑鼠。

1. 什麼是事件？

事件 是指在網頁上發生的某些操作或動作，例如點擊按鈕、鍵盤輸入、滑鼠移動等。當這些操作發生時，瀏覽器會生成一個「事件物件」，並將其傳遞給 JavaScript 程式碼處理。

常見的事件包括：

• click：當使用者點擊某個元素時觸發。
• keydown 和 keyup：當使用者按下或釋放鍵盤按鍵時觸發。
• mouseover 和 mouseout：當滑鼠進入或離開某個元素時觸發。
• submit：當使用者提交表單時觸發。

2. 事件監聽器（Event Listeners）

我們可以使用 事件監聽器 來監聽這些事件並作出反應。最常用的方法是 addEventListener，它允許我們為元素綁定一個或多個事件處理函數。

範例：
let button = document.getElementById("myButton");

button.addEventListener("click", function() {
alert("Button was clicked!");
});

在這裡，我們為按鈕元素綁定了一個點擊事件處理函數，當使用者點擊該按鈕時，會彈出一個提示框。

3. 事件物件（Event Object）

當事件被觸發時，JavaScript 會自動傳遞一個 事件物件（Event Object） 給事件處理函數。這個物件包含了有關事件的所有相關資訊，例如事件發生的元素、滑鼠位置、鍵盤按下的鍵等。

範例：
document.addEventListener("click", function(event) {
console.log("Mouse X: " + event.clientX + ", Mouse Y: " + event.clientY);
});

在這個例子中，每當滑鼠點擊時，事件物件會記錄滑鼠的座標位置，並將其輸出到控制台。

4. 事件的冒泡與捕獲

事件在 DOM 中的傳播分為兩個階段：冒泡 和 捕獲。

• 冒泡（Bubbling）：事件從最內層的目標元素開始，向外層的祖先元素傳播。
• 捕獲（Capturing）：事件從最外層的祖先元素開始，向目標元素傳播。

你可以在addEventListener 方法中指定是否要在捕獲階段還是冒泡階段處理事件，默認情況下是冒泡。

範例：
let outerDiv = document.getElementById("outer");
let innerDiv = document.getElementById("inner");

outerDiv.addEventListener("click", function() {
console.log("Outer Div clicked!");
});

innerDiv.addEventListener("click", function() {
console.log("Inner Div clicked!");
});

在這個範例中，點擊內層的 innerDiv，會觸發內層和外層的點擊事件，這就是冒泡的過程。

5. 移除事件監聽器

你可以通過 removeEventListener 方法來移除某個事件監聽器。這對於想要動態控制事件處理邏輯的情況非常有用。

範例：
function handleClick() {
alert("Button was clicked!");
}

button.addEventListener("click", handleClick);

// 移除點擊事件監聽器
button.removeEventListener("click", handleClick);

當 removeEventListener 被調用後，再點擊按鈕時將不會彈出提示框。