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