change事件在用户实质性改变表单值并失焦或确认时触发：select在选项切换后失焦/选中即发，checkbox在勾选状态改变时立即触发；仅响应用户交互，不响应JS脚本修改。
在 JavaScript 中，change 事件是监听表单元素值发生**实质性改变并失去焦点（或用户确认）**时触发的常用方式。对下拉框（<select>）和复选框（<input type="checkbox">）来说，它比 input 或 click 更精准——只在用户真正做出选择/勾选且操作完成时响应。
监听下拉框（select）的 change 事件
select 元素的 change 事件在用户切换选项并移开焦点（比如点击别处、按 Tab 键离开）时触发；现代浏览器也支持鼠标选中后立即触发（无需失焦），行为较一致。
- 用
addEventListener('change', handler)绑定更推荐，避免覆盖已有事件 - 在事件处理器中，通过
event.target.value获取当前选中的 option 的value值 - 如果需要获取显示文本（label），可用
event.target.selectedOptions[0]?.text
示例：
<select id="city">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="gz">广州</option>
</select>
<script>
document.getElementById('city').addEventListener('change', function(e) {
console.log('选中值：', e.target.value); // 如 'sh'
console.log('选中文本：', e.target.selectedOptions[0].text); // 如 '上海'
});
</script>
监听复选框（checkbox）的 change 事件
复选框的 change 事件在用户点击（勾选/取消勾选）后立即触发，无需失焦——这是它和 click 的关键区别：它只关心“值是否真的变了”，而 click 每次点击都触发（哪怕没改变状态）。
立即学习“Java免费学习笔记（深入）”；
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 通过
e.target.checked判断当前是否被勾选（布尔值） - 多个 checkbox 可共用一个事件处理器，用
e.target.name或e.target.id区分来源 - 注意：不要在
change中直接修改checked属性，否则可能引发意外循环
示例：
<input type="checkbox" id="agree" name="terms">
<label for="agree">我已阅读并同意条款</label>
<script>
document.getElementById('agree').addEventListener('change', function(e) {
if (e.target.checked) {
console.log('用户已同意');
} else {
console.log('用户撤回同意');
}
});
</script>
批量处理多个 checkbox（如权限列表）
当有一组同名 checkbox（例如权限配置），可监听父容器或使用事件委托，统一处理：
- 给容器加监听器，检查
e.target是否为 checkbox - 用
document.querySelectorAll('[name="permission"]')获取全部，再遍历读取状态 - 推荐在 change 后收集所有已勾选的 value，生成数组用于提交或校验
示例（事件委托）：
<div id="permissions">
<label><input type="checkbox" name="perm" value="read"> 查看</label>
<label><input type="checkbox" name="perm" value="edit"> 编辑</label>
<label><input type="checkbox" name="perm" value="delete"> 删除</label>
</div>
<script>
document.getElementById('permissions').addEventListener('change', function(e) {
if (e.target.type === 'checkbox' && e.target.name === 'perm') {
const checked = [...document.querySelectorAll('input[name="perm"]:checked')]
.map(cb => cb.value);
console.log('当前选中权限：', checked); // ['read', 'edit']
}
});
</script>
注意事项与常见误区
change 不会响应通过 JavaScript 脚本修改 value 或 checked 的情况——它只响应**用户交互**。若需程序触发逻辑，应手动调用函数，而非依赖事件。
- 不要用
onchange="handler()"内联写法，不利于维护和复用 - 动态添加的元素需用事件委托，或在插入后单独绑定
- 移动端对 select 的 change 触发时机略有差异（部分 iOS 需确认弹窗后才触发），必要时可结合
input事件兜底 - 复选框若设为
disabled，不会触发change
