HTML 元素:change 事件

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

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

HTML 标准列出了应该触发 change 事件的 <input> 类型

语法

在方法(如 addEventListener())中使用事件的名称,或设置事件处理器属性。

addEventListener('change', (event) => {});

onchange = (event) => { };

事件类型

通用 Event

示例

<select> 元素

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

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

<input placeholder="输入一些文本" name="name" />
<p id="log"></p>

JavaScript

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> 上移走(参见 bug 126379),否则不会触发 change 事件。但从 Firefox 63(Quantum)开始,这个行为在已经在主流浏览器中达成一致。