JavaScript - addEventListener(): 您通往互動網頁的門戶

你好，未來的JavaScript大師們！今天，我們將深入探索您網頁開發工具包中最強大的工具之一：addEventListener() 方法。在這個教學的結尾，您將能夠讓您的網頁隨著您的節奏起舞！

addEventListener() 是什麼？

在我們跳進代碼之前，讓我們先了解 addEventListener() 實際上是做什麼的。想像您在一個派對上（一個網頁），您想知道當有人（用戶）做了某件特定的事情時，比如按門鈴（點擊一個按鈕）。addEventListener() 方法就像是您忠實的管家，站在門旁等待那聲鈴聲，然後告訴您，以便您可以採取行動。

在JavaScript術語中，addEventListener() 讓您能夠聽取HTML元素上的特定事件並對其進行自定義功能響應。

語法

讓我們看一下基本語法：

element.addEventListener(event, function, useCapture);

這裡的每一部分意味著：

• element：您想將事件附加到的HTML元素。
• event：指定要聽取的事件類型的字符串（例如，"click"，"mouseover"）。
• function：當事件發生時要執行的函數。
• useCapture：一個可選的布爾參數（我們稍後會介紹）。

現在，讓我們看看它在實際中的運作！

示例

1. 標準的按鈕點擊

讓我們從最常見的例子開始：回應按鈕點擊。

HTML：

<button id="myButton">點我！</button>

JavaScript：

// 首先，我們獲取我們按鈕的引用
const button = document.getElementById("myButton");

// 現在我們為 'click' 事件添加一個事件監聽器
button.addEventListener("click", function() {
alert("按鈕被點擊！");
});

在這個例子中，我們告訴JavaScript在我們的按鈕上聽取 'click' 事件。當這發生時，它會顯示一個警告框。簡單吧？

2. 在悬停時改變樣式

讓我們來點更有趣的。當鼠標悬停在元素上時，我們將改變元素的樣式。

HTML：

<div id="colorBox" style="width: 100px; height: 100px; background-color: blue;">
把鼠標移過我！
</div>

JavaScript：

const box = document.getElementById("colorBox");

box.addEventListener("mouseover", function() {
this.style.backgroundColor = "red";
});

box.addEventListener("mouseout", function() {
this.style.backgroundColor = "blue";
});

在這裡，我們使用了兩個事件監聽器：一個是 'mouseover'（當鼠標進入元素時）和一個是 'mouseout'（當它離開時）。注意我們如何使用 this 來引用事件附加到的元素。

3. 表單驗證

現在，讓我們試試一些更實用的：基本表單驗證。

HTML：

<form id="myForm">
<input type="text" id="nameInput" placeholder="輸入您的名字">
<button type="submit">提交</button>
</form>

JavaScript：

const form = document.getElementById("myForm");
const nameInput = document.getElementById("nameInput");

form.addEventListener("submit", function(event) {
if (nameInput.value.trim() === "") {
event.preventDefault(); // 阻止表單提交
alert("請輸入您的名字！");
}
});

這段腚本聽取表單的 'submit' 事件。如果名字輸入為空，它會阻止表單提交並顯示一個警告框。注意函數中的 event 參數 - 這給我們提供了事件對象的訪問權，它有如 preventDefault() 的方法。

4. 鍵盤事件

讓我們通過創建一個簡單遊戲來探索鍵盤事件，在這個遊戲中，您必須按對正確的鍵。

HTML：

<div id="gameArea">
按下正確的鍵！
<p id="targetKey"></p>
<p id="message"></p>
</div>

JavaScript：

const targetKey = document.getElementById("targetKey");
const message = document.getElementById("message");
let currentKey = "";

function setNewTarget() {
currentKey = String.fromCharCode(65 + Math.floor(Math.random() * 26));
targetKey.textContent = `Target key: ${currentKey}`;
}

document.addEventListener("keydown", function(event) {
if (event.key.toUpperCase() === currentKey) {
message.textContent = "Correct! Well done!";
setNewTarget();
} else {
message.textContent = "Oops! Try again!";
}
});

setNewTarget(); // 開始遊戲

這段腚本設置一個隨機目標鍵並聽取整個文檔的 'keydown' 事件。然後它會檢查按下的鍵是否與目標匹配。

事件類型

有許多類型的事件您可以聽取。這裡有一些常見的：

事件類型	描述
click	當元素被點擊時
mouseover	當鼠標進入元素時
mouseout	當鼠標離開元素時
keydown	當按下一個鍵時
keyup	當釋放一個鍵時
submit	當提交表單時
load	當頁面或圖像完成加載時
change	當輸入元素的值改變時
focus	當元素獲得焦點時
blur	當元素失去焦點時

結論

好了，各位！您剛剛解鎖了 addEventListener() 的力量。有了這個知識，您可以創建有動態、能夠實時回應用戶操作的網頁。

記住，掌握這個（以及任何編程概念）的關鍵是練習。嘗試組合不同的事件，對不同的HTML元素進行實驗，最重要的是，樂在其中！

誰知道呢？也許下一個大型的互動網站將會是您使用今天學到的技能建造的。快樂編程，願您的事件監聽器總是專註！

Credits: Image by storyset