HTMLElement: change 事件

当用户修改元素的值时，change 事件会针对 <input>、<select> 和 <textarea> 元素触发。与 input 事件不同，change 事件并不一定会在每次修改元素的 value 时都触发。

根据被修改的元素类型以及用户与元素交互的方式，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() 这样的方法中使用事件名称，或者设置事件处理程序属性。

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>

body {
  display: grid;
  grid-template-areas: "select result";
}

select {
  grid-area: select;
}

.result {
  grid-area: result;
}

JavaScript

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

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

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载

不同的浏览器在是否应该为某些类型的交互触发 change 事件方面并不总是达成一致。例如，在 <select> 元素中，键盘导航曾经在 Gecko 中从未触发 change 事件，直到用户按下 Enter 键或将焦点移出 <select>（参见 Firefox 问题 126379）。然而，自从 Firefox 63（Quantum）开始，这种行为在所有主流浏览器之间保持一致。