JS об'єкт UIEvent

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

UIEvent — це набір подій в 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}`);
});

Використання цих подій дозволяє створювати інтерактивні веб-додатки, наприклад, форми з миттєвим підтвердженням даних, адаптивні інтерфейси та багато іншого.

правити

Порада

Для подій focus і blur додавайте спеціальні стилі для покращення UX. Наприклад, змінюйте рамку текстового поля при отриманні фокусу, щоб привернути увагу користувача.

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

Порада

Обробляйте події на рівні батьківських елементів через делегування. Наприклад, для списку посилань додавайте click на <ul>, а не на кожне <li>. Це спрощує управління кодом.

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

Порада

Використовуйте подію scroll для динамічних ефектів, таких як зникнення/поява елементів при прокрутці. Але пам’ятайте, що обробники цієї події можуть сильно вплинути на продуктивність.

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

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

Синтаксис

element.addEventListener('eventName', function(event) {
  // Ваш код
});

методи

властивості

Переглядачі

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

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

Переглядач
	1	1	1	12.1	12

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

Переглядач
	37	18	4	1

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

Переглядач
	-	-

Приклади

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

<form id="form">
    <label>Ім'я: <input type="text" name="name" value="Лесь"></label>
    <button type="submit">Надіслати</button>
</form>
<div id="status">Демонстраційний елемент</div>

const form = document.querySelector('#form');
const status = document.querySelector('#status');

form.addEventListener('focusin', (event) => {
  status.textContent = `Активний елемент: ${event.target.name}`;
});

form.addEventListener('focusout', () => {
  status.textContent = 'Жоден елемент не активний';
});

<div id="header" class="scroll-demo">
    <div class="scroll-inner">Прокручуваний вміст</div>
</div>

.scroll-demo {
    width: 220px;
    height: 110px;
    overflow: auto;
    border: 1px solid #0172ad;
}

.scroll-inner {
    width: 600px;
    height: 400px;
    background: linear-gradient(135deg, #eef6ff, #0172ad);
    padding: 8px;
}

const header = document.querySelector('#header');
window.addEventListener('scroll', () => {
  const scrollPosition = window.scrollY;
  header.textContent = `Поточна позиція прокрутки: ${scrollPosition}px`;
});