HTML 元素:change 事件
当用户更改 <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 Standard # event-change |
HTML Standard # handler-onchange |
浏览器兼容性
BCD tables only load in the browser
对于一些特定类型的交互是否要触发 change
事件,不同浏览器的意见并不总是一致的。例如,在 Gecko 的 <select>
元素中使用键盘导航,除非用户按下 Enter 键或将焦点从 <select>
上移走(参见 Firefox bug 126379),否则不会触发 change
事件。但从 Firefox 63(Quantum)开始,这个行为在已经在主流浏览器中达成一致。