HTMLElement: событие изменения

Событие 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 перечисляет типы <input> которые должны вызывать событие change.

Используйте имя события в методах, таких как addEventListener(), или установите свойство обработчика событий.

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

onchange = (event) => {};

Общее Event.

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

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

<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;
}

Результат

Разные браузеры не всегда соглашаются, должно ли срабатывать событие change при определенных типах взаимодействия. Например, навигация с помощью клавиатуры в элементах <select> раньше никогда не вызывало событие change в Gecko, пока пользователь не нажимал Enter или не переключал фокус с <select> (см. ошибку Firefox 126379). Однако начиная с Firefox 63 (Quantum) это поведение согласовано между всеми основными браузерами.