JavaScript - 事件介紹
你好，未來的 JavaScript 巫師們！今天，我們將踏上一段令人興奮的旅程，探索 JavaScript 事件的神秘世界。作為你們友善的鄰居計算機老師，我非常高興能夠引導你們了解這個讓你的網頁栩栩如生的基本概念。所以，拿起你們最喜歡的飲料，舒適地坐好，讓我們一起深入探討吧！
什麼是事件？
想像你在一個派對上（當然是一個編程派對！）。每次有事情發生 - 有人在場、一首歌開始播放，或者有人弄翻了飲料 - 那就是一個事件。在 JavaScript 的世界中，事件的工作原理與此類似。它們是你的網頁上發生的事情，JavaScript 能夠偵測並對其做出反應。
事件可以被觸發：
- 使用者的行為（例如點擊按鈕、移動鼠標）
- 瀏覽器的活動（例如完成加載一個頁面）
- 頁面上元素狀態的變化
以下是一個簡單的例子來說明這個概念：
<button id="myButton">點我！</button>
<script>
document.getElementById("myButton").addEventListener("click", function() {
alert("按鈕被點擊！");
});
</script>在這個例子中，點擊按鈕（事件）會彈出一個警告框（反應）。就像說："嘿，JavaScript，當有人點擊這個按鈕時，顯示這個訊息！"
JavaScript 事件處理器
既然我們已經了解了事件是什麼，讓我們來討論如何處理它們。事件處理器是當事件發生時運行的 JavaScript 函數。它們就像我們編程派對上的保安，決定每個事件發生時會發生什麼。
在 JavaScript 中有幾種方法可以分配事件處理器。讓我們來探討它們：
1. 內聯事件處理器
這是最簡單（但並不是總是最好的）方法來處理事件：
<button onclick="alert('你好，世界！')">點我</button>在這裡，事件處理器直接寫在 HTML 中。當按鈕被點擊時，它會顯示一個警告框。雖然這很容易理解，但在大型應用程序中通常不推薦這樣做，因為它將 HTML 和 JavaScript 混合在一起。
2. 屬性事件處理器
一個更好的方法是將你的 JavaScript 與 HTML 分開：
<button id="myButton">點我</button>
<script>
document.getElementById("myButton").onclick = function() {
alert("來自屬性事件處理器的問候！");
};
</script>這種方法將一個函數分配給按鈕元素的 onclick 屬性。這更乾淨，但它有一個限制：你只能這樣為每個事件分配一個處理器。
3. addEventListener() 方法
這是最靈活且強大的事件處理方法：
<button id="myButton">點我</button>
<script>
document.getElementById("myButton").addEventListener("click", function() {
alert("來自 addEventListener 的問候！");
});
</script>使用 addEventListener()，你可以：
- 將多個事件處理器附加到單個元素
- 在需要時輕鬆移除事件處理器
- 在事件生命週期中有更多的控制權
讓我們看一個更複雜的例子：
<button id="myButton">點我</button>
<script>
let button = document.getElementById("myButton");
function changeColor() {
this.style.backgroundColor = "red";
}
function addBorder() {
this.style.border = "2px solid blue";
}
button.addEventListener("click", changeColor);
button.addEventListener("click", addBorder);
</script>在這個例子中，點擊按鈕會將其顏色改為紅色並且添加一個藍色邊框。一個事件兩個處理器！
JavaScript 事件對象
當事件發生時，JavaScript 會創建一個 Event 對象。這個對象包含關於事件的詳細信息，例如事件發生的位置、事件的類型，以及有時特定於事件類型的附加信息。
讓我們看一個例子：
<button id="myButton">點我</button>
<script>
document.getElementById("myButton").addEventListener("click", function(event) {
console.log("事件類型: " + event.type);
console.log("目標元素: " + event.target.tagName);
console.log("鼠標 X 坐標: " + event.clientX);
console.log("鼠標 Y 坐標: " + event.clientY);
});
</script>當你點擊按鈕時，這段腚本會記錄關於點擊事件的信息，包括：
- 事件的類型（"click"）
- 被點擊的元素（一個 "BUTTON" 元素）
- 點擊時鼠標的 X 和 Y 坐標
這些信息對於創建有互動性和反應性的網頁應用程序非常有用。
以下是一個表格，總結了一些 Event 對象的常見屬性：
| 屬性 | 描述 |
|---|---|
| type | 事件的類型（例如 "click"、"mouseover"） |
| target | 觸發事件的元素 |
| clientX, clientY | 鼠標指針的水平和垂直坐標 |
| keyCode | 按下的鍵的鍵碼（對於鍵盤事件） |
| preventDefault() | 一個方法，用於阻止事件的默認行為 |
| stopPropagation() | 一個方法，用於阻止事件在 DOM 树中冒泡 |
記住，不同的事件類型可能具有附加的特定屬性。總是要查看文檔以獲得每個事件類型可用的完整屬性列表。
總結來說，事件是交互式網頁應用程序的心臟。它們讓你的 JavaScript 能夠回應用戶行為並創造動態、引人入勝的體驗。隨著你繼續你的 JavaScript 旅程，你會發現自己越來越多地與事件打交道。接受它們，嘗試它們，並觀察你的網頁變得栩栩如生！
快樂編程，未來的 JavaScript 忍者！??
Credits: Image by storyset