JS об'єкт UI
Загальний опис
UI Events — це набір подій в JavaScript, які пов’язані з взаємодією користувача з елементами веб-сторінки. Вони забезпечують можливість реагувати на такі дії, як фокусування на елементі, натискання клавіш, зміну вмісту поля вводу, масштабування або прокрутку сторінки.
Основні події цього типу включають:
focus— спрацьовує, коли елемент отримує фокус.blur— коли елемент втрачає фокус.input— викликається під час зміни значення текстового поля.resize— відстежує зміну розмірів вікна браузера.scroll— викликається при прокручуванні сторінки або контейнера.
Приклад використання focus і blur:
const input = document.querySelector('#textInput');
input.addEventListener('focus', () => {
console.log('Елемент отримав фокус');
});
input.addEventListener('blur', () => {
console.log('Елемент втратив фокус');
});
Приклад обробки прокрутки:
window.addEventListener('scroll', () => {
console.log('Сторінка прокручується!');
});
Події input і change особливо корисні для роботи з формами. input спрацьовує під час кожної зміни значення поля, а change — лише після того, як поле втратить фокус.
const input = document.querySelector('#textInput');
input.addEventListener('input', (event) => {
console.log(`Поточне значення: ${event.target.value}`);
});
Використання цих подій дозволяє створювати інтерактивні веб-додатки, наприклад, форми з миттєвим підтвердженням даних, адаптивні інтерфейси та багато іншого.
| Порада: | Для подій |
| Порада: | Використовуйте подію |
| Порада: | Обробляйте події на рівні батьківських елементів через делегування. Наприклад, для списку посилань додавайте |
Синтаксис
element.addEventListener('eventName', function(event) {
// Ваш код
});Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
1 |
1 |
12.1 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
37 |
18 |
4 |
1 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
Користувач вводить ім'я, і лічильник символів під полем динамічно оновлюється. При фокусі рамка поля змінює колір, а після втрати фокусу повертається до звичайного стану. Після натискання кнопки "Надіслати" виводиться повідомлення про успіх чи помилку залежно від заповнення полів. Це створює інтерактивний та адаптивний UX.
Цей код показує, який елемент форми знаходиться у фокусі. Він корисний для створення динамічних підказок або повідомлень для користувача.
const form = document.querySelector('#form');
const status = document.querySelector('#status');
form.addEventListener('focusin', (event) => {
status.textContent = `Активний елемент: ${event.target.name}`;
});
form.addEventListener('focusout', () => {
status.textContent = 'Жоден елемент не активний';
});Цей код оновлює текст у заголовку залежно від позиції прокрутки сторінки. Це може використовуватись у лендінгах для створення ефекту динамічного інтерфейсу.
const header = document.querySelector('#header');
window.addEventListener('scroll', () => {
const scrollPosition = window.scrollY;
header.textContent = `Поточна позиція прокрутки: ${scrollPosition}px`;
});Методи
initUIEvent()- Ініціалізує користувацьку подію `UIEvent` з визначеними параметрами, використовується для створення кастомних подій.
Властивості
sourceCapabilities- Вказує на `InputDeviceCapabilities` об'єкта, що описує пристрій, який викликав подію (наприклад, миша чи клавіатура).
view- Посилання на вікно (`window`), в якому відбулася подія, зазвичай визначає контекст виконання.
which- Вказує на код клавіші або кнопки миші, що викликала подію, але вважається застарілим (використовуйте `key` або `button`).
detail- Надає додаткову інформацію про подію, наприклад, кількість кліків для подій типу `MouseEvent`.