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 використовується для відстеження зміни вибору користувача в випадаючому списку. Це дозволяє динамічно оновлювати вміст сторінки або виконувати інші дії залежно від вибраного варіанту.
| Порада: | Пам'ятайте, що подія |
| Порада: | Для прапорців і перемикачів корисно перевіряти стан (позначений чи ні) в обробнику події |
| Порада: | Якщо у вас є взаємопов’язані поля форми, ви можете використовувати |
Синтаксис
element.addEventListener('change', function(event) {
// Код обробника події
});Значення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
66 |
57 |
11.1 |
53 |
16 |
| Переглядач | ||||
|---|---|---|---|---|
66 |
66 |
57 |
11.3 |
| Переглядач | ||
|---|---|---|
15.0.0 |
1.0 |
Приклади
У цьому прикладі ми використовуємо подію change, щоб змінювати доступні варіанти вибору в другому випадаючому списку на основі вибраної країни в першому списку. Коли користувач вибирає країну, подія change спрацьовує і динамічно оновлює список міст, які доступні для вибору. Якщо країна не вибрана, випадаючий список міст деактивується, що забезпечує більш інтерактивний і зручний користувацький досвід.
У цьому прикладі подія change використовується з прапорцем (checkbox). Коли користувач позначає прапорець "Показати деталі", показується додатковий блок з деталями. Це дозволяє створювати більш інтерактивні форми.
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';
}
});Цей приклад демонструє, як подія change може використовуватися для автоматичного оновлення тексту в елементі div на сторінці, коли користувач вводить нове значення в текстове поле та виходить з нього. Це може бути корисним для динамічного оновлення частин сторінки на основі введення користувача.
const inputField = document.getElementById('inputField');
const displayText = document.getElementById('displayText');
inputField.addEventListener('change', function() {
displayText.textContent = inputField.value;
});