JS властивість Event.change

Загальний опис

change — це подія в HTML, яка спрацьовує, коли значення елемента форми змінюється і елемент втрачає фокус. Вона найчастіше використовується з полями введення, випадаючими списками, перемикачами та прапорцями, де користувач може вносити зміни, і ці зміни потребують обробки, наприклад, для оновлення інших частин інтерфейсу або відправки даних на сервер.

Подія change не спрацьовує безпосередньо при кожному натисканні клавіші або зміні значення. Вона спрацьовує тільки тоді, коли користувач завершив введення, і елемент втратив фокус, або у випадку з випадаючими списками і прапорцями, коли значення змінюється. Це робить подію корисною для обробки змін після того, як користувач завершив редагування, на відміну від події input, яка спрацьовує миттєво при зміні значення.

Приклад використання події change може виглядати так:

const inputElement = document.querySelector('input');

inputElement.addEventListener('change', function(event) {
  console.log('Значення змінено на:', event.target.value);
});

У цьому прикладі подія change додається до поля введення input. Коли користувач змінює значення і виходить з поля, подія спрацьовує, і в консоль виводиться нове значення. Це особливо корисно для валідації форм або для оновлення інших елементів сторінки на основі змін, внесених користувачем.

Подія change також може бути використана з іншими елементами форми, такими як прапорці (checkbox), перемикачі (radio) і випадаючі списки (select). Наприклад, у випадку з випадаючим списком подія change спрацьовує при кожному виборі нового варіанту:

const selectElement = document.querySelector('select');

selectElement.addEventListener('change', function(event) {
  console.log('Обрано варіант:', event.target.value);
});

Тут подія change використовується для відстеження зміни вибору користувача в випадаючому списку. Це дозволяє динамічно оновлювати вміст сторінки або виконувати інші дії залежно від вибраного варіанту.

правити

Порада

Пам'ятайте, що подія change не спрацьовує миттєво під час зміни значення поля, тому для миттєвого відстеження змін краще використовувати подію input. Використовуйте change, коли вам потрібно знати лише остаточний вибір користувача.

автор: Bond правити

Порада

Для прапорців і перемикачів корисно перевіряти стан (позначений чи ні) в обробнику події change, оскільки це дозволить виконати дії, наприклад, показати або приховати додаткові поля форми в залежності від вибору користувача.

автор: Bond правити

Порада

Якщо у вас є взаємопов’язані поля форми, ви можете використовувати change, щоб динамічно змінювати доступні опції в другому полі залежно від вибору в першому. Наприклад, змінювати список міст в залежності від вибраної країни.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

element.addEventListener('change', function(event) {
  // Код обробника події
});

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	66	57	11.1	53	16

Підтримка: мобільні переглядачі

Переглядач
	66	66	57	11.3

Підтримка: серверні переглядачі

Переглядач
	15.0.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

<div id="showDetails">Демонстраційний елемент</div>
<div id="detailsSection">Демонстраційний елемент</div>

const checkbox = document.getElementById('showDetails');
const detailsSection = document.getElementById('detailsSection');

checkbox.addEventListener('change', function() {
  if (checkbox.checked) {
    detailsSection.style.display = 'block';
  } else {
    detailsSection.style.display = 'none';
  }
});

<input type="text" id="inputField" value="текст для прикладу" placeholder="Введи щось">
<div id="displayText">Демонстраційний елемент</div>

const inputField = document.getElementById('inputField');
const displayText = document.getElementById('displayText');

inputField.addEventListener('change', function() {
  displayText.textContent = inputField.value;
});