change事件是监听表单选择类控件值变化的标准方法，适用于select、radio、checkbox，在值改变且失去焦点时触发；可通过addEventListener绑定change事件获取选中值并执行响应操作，如动态更新页面内容、加载数据或切换主题；对于需即时反馈的场景，可结合click事件实现；典型应用包括下拉联动、条件显示和实时渲染。
在HTML表单中，当用户更改下拉框、单选按钮或复选框等选择类控件的值时，我们通常需要实时响应这种变化。这就要用到“选择改变事件”的监听与处理。最常用的就是 change 事件，它在元素的值发生改变并失去焦点后触发，非常适合处理表单选择操作。
使用 change 事件监听选项变化
对于 <select> 下拉菜单、<input type="radio"> 单选框、<input type="checkbox"> 复选框等元素，change 事件是最标准的选择。
示例：监听下拉框选项变化
<select id="mySelect">
<option value="">请选择</option>
<option value="js">JavaScript</option>
<option value="html">HTML</option>
<option value="css">CSS</option>
</select>
JavaScript 监听代码：
立即学习“前端免费学习笔记（深入）”；
<script>
document.getElementById('mySelect').addEventListener('change', function() {
const selected = this.value;
console.log('选中了：', selected);
});
</script>
实时响应：input 与 change 的区别
对于某些场景，比如单选按钮组，你可能希望用户一点击就立即响应，而不是等到失去焦点。这时可以考虑使用 input 事件，但注意：input 事件对 <select> 和单选/复选框的支持有限。
更稳妥的做法是结合 change 和 click 事件来实现即时反馈。
示例：监听单选按钮组选择
<input type="radio" name="theme" value="light" id="light">
<input type="radio" name="theme" value="dark" id="dark">
JavaScript 监听：
document.querySelectorAll('input[name="theme"]').forEach(radio => {
radio.addEventListener('change', function() {
console.log('主题切换为：', this.value);
});
});
动态更新页面内容的实用技巧
监听选择事件常用于动态加载数据、切换界面主题或显示不同表单项。关键在于获取当前选中的值，并据此执行逻辑。
常见操作包括：
- 根据下拉选项显示或隐藏其他表单字段
- 通过 fetch 请求加载关联数据（如省市区联动）
- 更新页面样式或文本内容
例如：选择课程后显示简介
function updateCourseInfo() {
const select = document.getElementById('mySelect');
const infoBox = document.getElementById('info');
const texts = {
js: 'JavaScript 是一门强大的脚本语言。',
html: 'HTML 是网页的结构基础。',
css: 'CSS 控制网页的样式和布局。'
};
infoBox.textContent = texts[select.value] || '请选择课程';
}
document.getElementById('mySelect').addEventListener('change', updateCourseInfo);
基本上就这些。掌握 change 事件的使用，配合 DOM 操作，就能实现大多数表单选择交互需求。关键是绑定正确元素，及时获取值，并避免重复监听。不复杂但容易忽略细节。
