HTMLElement：change 事件
当用户修改 <input>、<select> 和 <textarea> 元素的值时，会触发 change 事件。与 input 事件不同，change 事件不一定会在元素 value 的每次更改时都触发。
根据被更改元素的类型以及用户与元素的交互方式，change 事件会在不同的时刻触发：
- 当
<input type="checkbox">元素被选中或取消选中时（通过单击或使用键盘）； - 当
<input type="radio">元素被选中时（但取消选中时不会）； - 当用户明确提交更改时（例如，通过鼠标单击从
<select>的下拉列表中选择一个值，为<input type="date">选择一个日期，为<input type="file">选择一个文件等）； - 当元素的值被更改后失去焦点时：对于用户通过输入而非选择进行交互的元素，例如
<textarea>或<input>元素中的text、search、url、tel、email或password类型。
HTML 规范列出了 应该触发 change 事件的 <input> 类型。
语法
在诸如 addEventListener() 之类的方法中使用事件名称，或设置事件处理程序属性。
js
addEventListener("change", (event) => { })
onchange = (event) => { }
事件类型
一个通用的 Event。
示例
<select> 元素
HTML
html
<label>
Choose an ice cream flavor:
<select class="ice-cream" name="ice-cream">
<option value="">Select One …</option>
<option value="chocolate">Chocolate</option>
<option value="sardine">Sardine</option>
<option value="vanilla">Vanilla</option>
</select>
</label>
<div class="result"></div>
JavaScript
js
const selectElement = document.querySelector(".ice-cream");
const result = document.querySelector(".result");
selectElement.addEventListener("change", (event) => {
result.textContent = `You like ${event.target.value}`;
});
结果
文本输入元素
对于某些元素，包括 <input type="text">，change 事件直到控件失去焦点时才会触发。请尝试在下面的字段中输入一些内容，然后单击其他地方以触发事件。
HTML
html
<input placeholder="Enter some text" 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;
}
结果
规范
| 规范 |
|---|
| HTML # event-change |
| HTML # handler-onchange |
浏览器兼容性
加载中…
不同浏览器在 change 事件是否应该为某些类型的交互触发方面并不总是达成一致。例如，过去在 Gecko 中，使用 <select> 元素进行键盘导航时，在用户按下 Enter 键或将焦点移出 <select> 之前，change 事件从未触发（请参阅 Firefox bug 126379）。然而，自 Firefox 63 (Quantum) 起，所有主流浏览器中的此行为已保持一致。