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.

当用户更改 <input><select><textarea> 元素的值时,change 事件在这些元素上触发。和 input 事件不同的是,并不是每次元素的 value 改变时都会触发 change 事件。

基于表单元素的类型和用户对元素的操作的不同,change 事件触发的时机也不同:

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

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
change event

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

对于一些特定类型的交互是否要触发 change 事件,不同浏览器的意见并不总是一致的。例如,在 Gecko 的 <select> 元素中使用键盘导航,除非用户按下 Enter 键或将焦点从 <select> 上移走(参见 Firefox bug 126379),否则不会触发 change 事件。但从 Firefox 63(Quantum)开始,这个行为在已经在主流浏览器中达成一致。