HTML 元素：change 事件
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Please help us by answering a few questions.
当用户更改 <input>、<select> 和 <textarea> 元素的值时，change 事件在这些元素上触发。和 input 事件不同的是，并不是每次元素的 value 改变时都会触发 change 事件。
基于表单元素的类型和用户对元素的操作的不同，change 事件触发的时机也不同：
- 当
<input type="checkbox">元素被选中或取消选中时（通过点击或使用键盘）； - 当
<input type="radio">元素被选中时（但不是取消选中时）； - 当用户显式提交改变时（例如：通过鼠标点击了
<select>中的一个下拉选项，通过<input type="date">元素选择了一个日期，通过<input type="file">元素上传了一个文件等）； - 当标签的值被修改并且失去焦点后，但未提交时（例如：对
<textarea>、text、search、url、tel、email或password类型的<input>元素进行编辑后）。
HTML 标准列出了应该触发 change 事件的 <input> 类型。
语法
在方法（如 addEventListener()）中使用事件的名称，或设置事件处理器属性。
js
addEventListener("change", (event) => {});
onchange = (event) => {};
事件类型
通用 Event。
示例
<select> 元素
HTML
html
<label>
选择一种冰淇淋口味：
<select class="ice-cream" name="ice-cream">
<option value="">选择一个...</option>
<option value="chocolate">巧克力</option>
<option value="sardine">沙丁鱼</option>
<option value="vanilla">香草</option>
</select>
</label>
<div class="result"></div>
JavaScript
js
const selectElement = document.querySelector(".ice-cream");
selectElement.addEventListener("change", (event) => {
const result = document.querySelector(".result");
result.textContent = `你喜欢 ${event.target.value}`;
});
结果
文本输入元素
对于像 <input type="text"> 这样的元素，change 事件在控件失去焦点前都不会触发。试一下在下面的输入框输入一些文字，然后点击输入框外的地方来触发事件。
HTML
html
<input placeholder="输入一些文本" name="name" />
<p id="log"></p>
JavaScript
js
const input = document.querySelector("input");
const log = document.getElementById("log");
input.addEventListener("change", updateValue);
function updateValue(e) {
log.textContent = e.target.value;
}
结果
规范
| Specification |
|---|
| HTML # event-change |
| HTML # handler-onchange |
浏览器兼容性
对于一些特定类型的交互是否要触发 change 事件，不同浏览器的意见并不总是一致的。例如，在 Gecko 的 <select> 元素中使用键盘导航，除非用户按下 Enter 键或将焦点从 <select> 上移走（参见 Firefox bug 126379），否则不会触发 change 事件。但从 Firefox 63（Quantum）开始，这个行为在已经在主流浏览器中达成一致。