JavaScript - 表單事件：初學者指南

你好，有抱負的開發者們！作為一位有多年經驗的計算機科學教師，我很興奮能夠引導你們進入JavaScript表單事件的精彩世界。如果你是編程新手，請別擔心——我們會從基礎開始，逐步學習。所以，來一杯咖啡，放鬆一下，我們一起來深入探討吧！

JavaScript - Form Events

表單事件是什麼？

在我們深入細節之前，讓我們先了解表單事件是什麼。在網頁開發中，表單就像數字化的文書——它們從用戶那裡收集信息。表單事件是在用戶與這些表單交互時發生的特殊事件。這就像你填寫工作申請表時，接待員注意到你每次拿起或放下筆的時候——這就是表單事件在數字世界中的做法！

常見的表單事件

讓我們看看你將會遇到的一些最常見的表單事件：

事件名稱	描述
submit	在表單提交時觸發
reset	在表單重置時觸發
focus	在元素獲得焦點時觸發
blur	在元素失去焦點時觸發
change	在輸入元素的值改變時觸發
input	在輸入元素的值改變時觸發（每次鍵盤敲擊）

現在，讓我們通過一些實際示例來探索這些事件！

表單事件實際應用示例

1. 提交事件（Submit Event）

提交事件可能是你最常用的表單事件。當用戶嘗試提交表單時，它會被觸發。

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

<script>
document.getElementById("myForm").addEventListener("submit", function(event) {
event.preventDefault(); // 阻止表單實際提交
var name = document.getElementById("name").value;
alert("你好，" + name + "！你的表單已提交。");
});
</script>

在這個示例中，我們正在聆聽表單的提交事件。當它發生時，我們阻止默認行為（即實際提交表單），獲取名稱輸入框的值，並顯示一個帶有問候的彈窗。

2. 重置事件（Reset Event）

當表單被重置為其默認值時，會發生重置事件。這就像在你的表單上按下了"撤銷"按鈕！

<form id="myForm">
<input type="text" id="name" placeholder="輸入你的名字">
<button type="reset">重置</button>
</form>

<script>
document.getElementById("myForm").addEventListener("reset", function(event) {
alert("表單已重置！");
});
</script>

在這裡，無論何時點擊重置按鈕，都會彈出一個提示，告訴你表單已經重置。

3. 焦點和失焦事件（Focus and Blur Events）

焦點和失焦事件就像表單世界的聚光燈。當元素獲得聚光燈時，會發生焦點事件，當它失去聚光燈時，會發生失焦事件。

<input type="text" id="myInput" placeholder="點我！">

<script>
var input = document.getElementById("myInput");

input.addEventListener("focus", function() {
this.style.backgroundColor = "黃色";
});

input.addEventListener("blur", function() {
this.style.backgroundColor = "";
});
</script>

在這個示例中，當你點擊（焦點）輸入框時，它會變成黃色。當你將鼠標移開（失焦）時，它會恢復正常。這就像輸入框害羞並在得到你的關注時變紅一樣！

4. 改變事件（Change Event）

當輸入元素的值改變並且失去焦點時，會觸發改變事件。

<select id="colorSelect">
<option value="">選擇一種顏色</option>
<option value="red">紅色</option>
<option value="blue">藍色</option>
<option value="green">綠色</option>
</select>

<script>
document.getElementById("colorSelect").addEventListener("change", function() {
document.body.style.backgroundColor = this.value;
});
</script>

這段腳本會根據你的選擇改變頁面的背景顏色。這就像有一根魔法棒可以為整個房間上色！

5. 輸入事件（Input Event）

輸入事件與改變事件相似，但它會在值改變後立即觸發。

<input type="text" id="textInput" placeholder="輸入一些東西...">
<p id="output"></p>

<script>
var input = document.getElementById("textInput");
var output = document.getElementById("output");

input.addEventListener("input", function() {
output.textContent = "你輸入了: " + this.value;
});
</script>

這個示例會在輸入時顯示實時反饋。這就像有一個友好的回聲重複你說的話，但以文字形式！

組合所有知識

現在我們已經看到了這些事件的使用，讓我們創建一個更複雜的示例，它使用多個事件：

<form id="registrationForm">
<input type="text" id="username" placeholder="用戶名">
<input type="password" id="password" placeholder="密碼">
<input type="email" id="email" placeholder="電子郵件">
<button type="submit">註冊</button>
<button type="reset">清除</button>
</form>

<script>
var form = document.getElementById("registrationForm");
var username = document.getElementById("username");
var password = document.getElementById("password");
var email = document.getElementById("email");

// 提交事件
form.addEventListener("submit", function(event) {
event.preventDefault();
alert("為 " + username.value + " 提交了註冊申請");
});

// 重置事件
form.addEventListener("reset", function() {
alert("表單已清除！");
});

// 焦點事件
[username, password, email].forEach(function(element) {
element.addEventListener("focus", function() {
this.style.backgroundColor = "#e6f3ff";
});
});

// 失焦事件
[username, password, email].forEach(function(element) {
element.addEventListener("blur", function() {
this.style.backgroundColor = "";
});
});

// 輸入事件
email.addEventListener("input", function() {
if (this.value.includes("@")) {
this.style.borderColor = "綠色";
} else {
this.style.borderColor = "紅色";
}
});
</script>

這個註冊表單展示了我們學過的所有事件：

提交事件阻止表單實際提交並顯示一個提示。
重置事件通知當表單被清除。
焦點和失焦事件改變輸入框的背景色。
電子郵件輸入框的輸入事件根據是否包含"@"符號改變邊框顏色。

結論

恭喜你！你已經踏出了進入JavaScript表單事件世界的第一步。記住，這些事件就像你網頁的感官——它們幫助你的代碼"看到"和"感覺"用戶的行為。隨著實踐，你將能夠創建有交互性和反應靈敏的表單，讓你的網站變得栩栩如生。

持續實驗，持續編程，最重要的是，享受樂趣！千里之行，始於足下，而你剛剛迈出了重要的一步。未來的開發者，祝你編程愉快！

Credits: Image by storyset