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}`);
});
Використання цих подій дозволяє створювати інтерактивні веб-додатки, наприклад, форми з миттєвим підтвердженням даних, адаптивні інтерфейси та багато іншого.
автор: Bond
- Порада
-
Для подій
автор: Bondfocusіblurдодавайте спеціальні стилі для покращення UX. Наприклад, змінюйте рамку текстового поля при отриманні фокусу, щоб привернути увагу користувача. - Порада
-
Обробляйте події на рівні батьківських елементів через делегування. Наприклад, для списку посилань додавайте
автор: Bondclickна<ul>, а не на кожне<li>. Це спрощує управління кодом. - Порада
-
Використовуйте подію
автор: Bondscrollдля динамічних ефектів, таких як зникнення/поява елементів при прокрутці. Але пам’ятайте, що обробники цієї події можуть сильно вплинути на продуктивність.
Синтаксис
element.addEventListener('eventName', function(event) {
// Ваш код
});методи
| Метод | Опис |
|---|---|
| initUIEvent | Ініціалізує користувацьку подію UIEvent з визначеними параметрами, використовується для створення кастомних подій. |
властивості
| Властивість | Опис |
|---|---|
| sourceCapabilities | Вказує на InputDeviceCapabilities об'єкта, що описує пристрій, який викликав подію (наприклад, миша чи клавіатура). |
| view | Посилання на вікно (window), в якому відбулася подія, зазвичай визначає контекст виконання. |
| which | Вказує на код клавіші або кнопки миші, що викликала подію, але вважається застарілим (використовуйте key або button). |
| detail | Надає додаткову інформацію про подію, наприклад, кількість кліків для подій типу MouseEvent. |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | ≤12.1 | 12 | 9 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Цей код показує, який елемент форми знаходиться у фокусі. Він корисний для створення динамічних підказок або повідомлень для користувача.
HTML
<form id="form">
<label>Ім'я: <input type="text" name="name" value="Лесь"></label>
<button type="submit">Надіслати</button>
</form>
<div id="status">Демонстраційний елемент</div>JS
const form = document.querySelector('#form');
const status = document.querySelector('#status');
form.addEventListener('focusin', (event) => {
status.textContent = `Активний елемент: ${event.target.name}`;
});
form.addEventListener('focusout', () => {
status.textContent = 'Жоден елемент не активний';
});Цей код оновлює текст у заголовку залежно від позиції прокрутки сторінки. Це може використовуватись у лендінгах для створення ефекту динамічного інтерфейсу.
HTML
<div id="header" class="scroll-demo">
<div class="scroll-inner">Прокручуваний вміст</div>
</div>CSS
.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;
}JS
const header = document.querySelector('#header');
window.addEventListener('scroll', () => {
const scrollPosition = window.scrollY;
header.textContent = `Поточна позиція прокрутки: ${scrollPosition}px`;
});Користувач вводить ім'я, і лічильник символів під полем динамічно оновлюється. При фокусі рамка поля змінює колір, а після втрати фокусу повертається до звичайного стану. Після натискання кнопки "Надіслати" виводиться повідомлення про успіх чи помилку залежно від заповнення полів. Це створює інтерактивний та адаптивний UX.
HTML
<header>
<h2 class="title">UI Events</h2>
<p class="description">Взаємодія з користувачем через події форми та фокусування.</p>
</header>
<main>
<div class="result">
<!-- Форма для взаємодії -->
<form id="interactiveForm">
<label for="username">Ім'я користувача:</label>
<input type="text" id="username" name="username" maxlength="20" placeholder="Введіть ім'я">
<small id="charCount">Залишилося 20 символів</small>
<label for="email">Електронна пошта:</label>
<input type="email" id="email" name="email" placeholder="Введіть email">
<button type="submit">Надіслати</button>
</form>
<!-- Місце для повідомлення -->
<p id="message" style="margin-top: 20px; color: #222;"></p>
</div>
</main>CSS
body {
font-size: 16px;
line-height: 1.5;
font-family: monospace;
}
header {
background-color: #f1f1f1;
margin-bottom: 25px;
padding: 15px;
-webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
-moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}
header h2.title {
padding-bottom: 15px;
border-bottom: 1px solid #999;
}
header p.description {
font-style: italic;
color: #222;
}
.result {
background-color: #f8f8f8;
padding: 15px;
-webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
-moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}
/* Стилі для форми */
#interactiveForm {
display: flex;
flex-direction: column;
gap: 15px;
}
#interactiveForm input {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
#interactiveForm input:focus {
border-color: #007BFF;
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}
#charCount {
font-size: 0.9rem;
color: #555;
}JS
// Отримуємо елементи
const form = document.getElementById('interactiveForm');
const usernameInput = document.getElementById('username');
const charCount = document.getElementById('charCount');
const message = document.getElementById('message');
// Відстежуємо подію 'input' для оновлення лічильника символів
usernameInput.addEventListener('input', event => {
const remaining = usernameInput.maxLength - usernameInput.value.length;
charCount.textContent = `Залишилося ${remaining} символів`;
});
// Фокус і втрата фокусу на полі
usernameInput.addEventListener('focus', () => {
charCount.style.color = '#007BFF';
});
usernameInput.addEventListener('blur', () => {
charCount.style.color = '#555';
});
// Обробка події надсилання форми
form.addEventListener('submit', event => {
event.preventDefault(); // Зупиняємо стандартну дію
const username = usernameInput.value.trim();
const email = document.getElementById('email').value.trim();
if (username && email) {
message.textContent = `Дякуємо, ${username}! Ваша форма надіслана.`;
message.style.color = 'green';
form.reset();
charCount.textContent = `Залишилося ${usernameInput.maxLength} символів`;
} else {
message.textContent = 'Будь ласка, заповніть всі поля.';
message.style.color = 'red';
}
});
//# sourceURL=pen.jsКоментарі
Коментарів ще немає — будьте першим!