JavaScript 中的 change

什么是 `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>

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 事件在主流浏览器中均有良好的支持，但在某些旧版浏览器中可能存在细微差异。因此，建议在实际项目中进行充分的测试。