【前端教程】從零開始學JavaScript交互：7個經典事件處理案例解析

在網頁開發中，交互性是提升用戶體驗的關鍵。JavaScript作為網頁交互的核心語言，通過事件處理機制讓靜態頁面"動"了起來。本文將通過7個經典案例，從簡單到復雜，逐步講解JavaScript事件處理的實現方法和應用場景。

案例1：點擊事件控制元素大小

這個案例展示了最基礎的點擊事件應用，通過點擊不同的div來控制目標元素的大小變化。

核心代碼實現

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>點擊控制元素大小</title>
<style>
#gaiBianWenZi{width: 400px; height: 20px;border: solid red 1px;text-align: center;line-height: 20px;cursor: pointer; /* 鼠標懸停顯示手型，提示可點擊 */
}#seKuai{width: 100px; height: 100px; background-color: red;margin: 20px auto; /* 居中顯示 */
}#huanYuanWenZi{width: 400px; height: 20px;border: solid green 1px;text-align: center;line-height: 20px;cursor: pointer;
}
</style><script>
// 改變元素大小的函數
function gaiBian(){var seKuai = document.getElementById("seKuai");seKuai.style.width = "200px";seKuai.style.height = "200px";
}// 還原元素大小的函數
function huanYuan(){var seKuai = document.getElementById("seKuai");seKuai.style.width = "100px";seKuai.style.height = "100px";
}
</script>
</head>
<body>
<div id="gaiBianWenZi" onclick="gaiBian()"> 點擊我改變div色塊大小
</div>
<div id="huanYuanWenZi" onclick="huanYuan()">還原div色塊大小
</div>
<div id="seKuai"></div>
</body>
</html>

關鍵知識點

事件綁定方式：使用onclick屬性在HTML標簽中直接綁定點擊事件
DOM元素獲取：通過document.getElementById()方法獲取頁面元素
樣式修改：通過修改元素的style屬性來改變CSS樣式
用戶體驗提示：使用cursor: pointer提示元素可點擊

案例1擴展：同時控制大小和顏色

在基礎版的基礎上，這個擴展案例增加了顏色控制，展示了如何同時修改多個樣式屬性。

核心改進點

function ONCLICK(){var div1 = document.getElementById("div1");// 同時修改大小和顏色div1.style.width = "200px";div1.style.height = "200px";div1.style.backgroundColor = "blue"; // 改變背景色
}function huanYuan(){var div1 = document.getElementById("div1");// 還原為初始狀態div1.style.width = "100px";div1.style.height = "100px";div1.style.backgroundColor = "red";
}

擴展知識點

多屬性修改：可以同時修改元素的多個樣式屬性
命名規范：CSS中的background-color在JavaScript中需寫為backgroundColor（駝峰命名法）
元素選擇：除了div，其他元素（如p標簽）也可以綁定事件

案例2：鼠標懸停事件

這個案例展示了如何使用鼠標懸停(onmouseover)和鼠標離開(onmouseout)事件實現交互效果。

核心代碼

<div id="seKuai" onmouseover="gaiBian()" onmouseout="huanYuan()"></div><script>
function gaiBian(){var seKuai = document.getElementById("seKuai");seKuai.style.width = "200px";seKuai.style.height = "200px";
}function huanYuan(){var seKuai = document.getElementById("seKuai");seKuai.style.width = "100px";seKuai.style.height = "100px";
}
</script>

關鍵知識點

鼠標事件類型：
- onmouseover：鼠標移動到元素上時觸發
- onmouseout：鼠標從元素上移開時觸發
即時反饋：這種交互方式能給用戶提供即時的視覺反饋，增強交互體驗
應用場景：常用于導航菜單、按鈕等元素的狀態提示

案例3：表單焦點事件

表單交互是網頁中最常見的交互場景之一，這個案例展示了如何使用焦點事件處理表單交互。

核心代碼

<br>用戶名稱:
<input type="text" id="txt1" onfocus="unameText()" onblur="tiShi1()" />
<span id="span1"></span><br>用戶密碼:
<input type="text" id="txt2" onfocus="upwdText()" onblur="tiShi2()" />
<span id="span2"></span><script>
// 獲取焦點時觸發：顯示輸入內容
function unameText(){var span1 = document.getElementById("span1");span1.innerHTML = document.getElementById("txt1").value;
}// 失去焦點時觸發：顯示提示信息
function tiShi1(){var span1 = document.getElementById("span1");span1.innerHTML = "失去焦點了哦";span1.style.color = "red";
}// 密碼框的類似處理...
function upwdText(){/* 略 */}
function tiShi2(){/* 略 */}
</script>

關鍵知識點

表單事件類型：
- onfocus：元素獲取焦點時觸發（如點擊輸入框）
- onblur：元素失去焦點時觸發（如點擊輸入框外區域）
內容操作：使用innerHTML屬性修改元素內容
表單反饋：實時向用戶提供操作反饋，提升表單填寫體驗

案例4：文本選擇事件

這個案例展示了如何通過onselect事件響應文本選中操作。

核心代碼

<input type="text" id="txt1" onselect="xuanZhong(this)" /><script>
// 選中文本時觸發
function xuanZhong(chuanZhi){alert(chuanZhi.value); // 彈出選中的內容
}
</script>

關鍵知識點

this關鍵字：代表當前觸發事件的元素，簡化代碼編寫
事件傳參：通過this將當前元素作為參數傳遞給處理函數
用戶輸入捕獲：onselect事件可用于捕獲用戶選中的文本內容

案例5：下拉框改變事件

下拉選擇框(select)是常用的表單元素，onchange事件用于響應選項變化。

核心代碼

<select onchange="xuanZhong(this)"><option value="詩書畫唱">詩書畫唱</option><option value="三連">三連</option><option value="點贊">點贊</option>
</select><script>
function xuanZhong(chuanZhi){alert(chuanZhi.value); // 彈出選中的選項值
}
</script>

關鍵知識點

onchange事件：當元素的值發生改變時觸發，常用于select、input等元素
選項值獲取：通過value屬性獲取選中項的值
表單聯動：這是實現表單元素聯動效果的基礎（如省市區三級聯動）

案例6：實時輸入統計

這個案例展示了如何實時監測用戶輸入，并進行字數統計，這在評論、留言等場景中非常實用。

核心代碼

<input type="text" onkeyup="tiShi(this)" />
<span id="spanId">你輸入了0個字</span><script>
function tiShi(chuanZhi){var ziShu = chuanZhi.value.length; // 獲取輸入長度var spanIdVar = document.getElementById("spanId");spanIdVar.innerHTML = "你輸入了" + ziShu + "個字";spanIdVar.style.color = "red";
}
</script>

關鍵知識點

鍵盤事件：onkeyup在鍵盤按鍵松開時觸發，適合實時監測輸入
輸入長度計算：通過value.length獲取輸入內容的長度
實時反饋：提供即時的輸入反饋，增強用戶體驗
擴展應用：可用于實現輸入字數限制、實時搜索提示等功能

案例7：簡易計算器

這個案例綜合運用了前面介紹的多種事件處理方法，實現了一個簡單的計算器功能。

核心代碼

<input type="text" id="txtId1" />
<select id="selectId1"><option value="+">+</option><option value="-">-</option><option value="*">*</option><option value="/">/</option>
</select>
<input type="text" id="txtId2" />=
<input type="text" id="txtId3" />
<input type="button" value="計算結果" id="buttonId" /><script>
window.onload = function(){var buttonIdVar = document.getElementById("buttonId");buttonIdVar.onclick = function(){var txt1 = document.getElementById("txtId1");var txt2 = document.getElementById("txtId2");// 驗證輸入是否為數字if(!isNaN(txt1.value) && !isNaN(txt2.value)){var result = document.getElementById("txtId3");var select = document.getElementById("selectId1");var op = select.options[select.selectedIndex].value;// 根據選擇的運算符進行計算switch(op){case "+":result.value = Number(txt1.value) + Number(txt2.value);break;case "-":result.value = Number(txt1.value) - Number(txt2.value);break;case "*":result.value = Number(txt1.value) * Number(txt2.value);break;case "/":if(Number(txt2.value) == 0){alert("除數不能為0，請重新輸入");txt1.value = "";txt2.value = "";result.value = "";} else {result.value = Number(txt1.value) / Number(txt2.value);}break;}} else {alert("請輸入數字");txt1.value = "";txt2.value = "";}}
}
</script>

關鍵知識點

事件綁定方式：除了HTML屬性綁定，還可以通過JavaScript代碼動態綁定事件（buttonIdVar.onclick = function(){...}）
頁面加載事件：window.onload確保在頁面完全加載后再執行JavaScript代碼
數據驗證：使用isNaN()函數驗證輸入是否為有效數字
類型轉換：使用Number()將字符串轉換為數字進行計算
條件判斷與分支：綜合運用if-else和switch進行邏輯處理
錯誤處理：對除數為0等異常情況進行處理