什么是 change 事件？
change 事件是 HTML 表單元素的一種事件類型，當表單元素的值發生變化并且失去焦點時，該事件會被觸發。常見的表單元素包括 <input>、<select> 和 <textarea>。
適用元素
<input>（type 為 text、checkbox、radio 等）<select><textarea>
基本使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Change Event Demo</title>
</head>
<body><form id="myForm"><label for="myInput">Input:</label><input type="text" id="myInput"><label for="mySelect">Select:</label><select id="mySelect"><option value="1">Option 1</option><option value="2">Option 2</option><option value="3">Option 3</option></select><label for="myTextarea">Textarea:</label><textarea id="myTextarea"></textarea><button type="submit">Submit</button></form><script src="app.js"></script>
</body>
</html>
?js
document.addEventListener('DOMContentLoaded', () => {const inputElement = document.getElementById('myInput');const selectElement = document.getElementById('mySelect');const textareaElement = document.getElementById('myTextarea');inputElement.addEventListener('change', (event) => {console.log('Input changed to:', event.target.value);});selectElement.addEventListener('change', (event) => {console.log('Select changed to:', event.target.value);});textareaElement.addEventListener('change', (event) => {console.log('Textarea changed to:', event.target.value);});
});
在上面的代碼中，我們為每個表單元素添加了一個 change 事件監聽器。當用戶改變元素的值并且失去焦點時，事件會被觸發，控制臺會輸出相應的信息。
change 事件的實際應用
實時表單驗證
change 事件常用于實時表單驗證。例如，我們可以在用戶輸入內容后，立即驗證輸入的有效性并給予反饋：
document.addEventListener('DOMContentLoaded', () => {const inputElement = document.getElementById('myInput');inputElement.addEventListener('change', (event) => {const value = event.target.value;const feedbackElement = document.getElementById('feedback');if (value.length < 3) {feedbackElement.textContent = 'Input must be at least 3 characters long.';} else {feedbackElement.textContent = '';}});
});
動態更新界面
change 事件也可以用于根據用戶選擇動態更新界面內容。例如，當用戶選擇一個選項時，顯示對應的詳細信息：
document.addEventListener('DOMContentLoaded', () => {const selectElement = document.getElementById('mySelect');const detailsElement = document.getElementById('details');const details = {'1': 'Details for Option 1','2': 'Details for Option 2','3': 'Details for Option 3'};selectElement.addEventListener('change', (event) => {const value = event.target.value;detailsElement.textContent = details[value] || 'No details available';});
});
注意事項
-
change與input事件的區別：change事件在元素失去焦點時觸發，而input事件在元素的值每次發生變化時立即觸發。input事件適用于需要實時更新的場景，例如搜索框的自動補全。
-
跨瀏覽器兼容性：
change事件在主流瀏覽器中均有良好的支持，但在某些舊版瀏覽器中可能存在細微差異。因此，建議在實際項目中進行充分的測試。
change 事件是一個非常有用的事件類型，特別適用于表單元素的值變化檢測和處理。在實際開發中，合理使用 change 事件可以提升用戶體驗，提高表單交互的動態性和響應性。希望本文對你理解和使用 change 事件有所幫助。?
