JS метод Document.addEventListener()
Загальний опис
Метод addEventListener() дозволяє об'єктам EventTarget призначати обробники подій, що слухають і реагують на певні події, які можуть відбуватися. Об'єкт EventTarget може бути будь-яким об'єктом, здатним приймати події, наприклад, елементи DOM, документ, або ж вікно браузера. Основна корисність методу полягає в тому, що він забезпечує динамічне і гнучке керування подіями в програмі, дозволяючи розробникам легко додавати або видаляти слухачів подій в залежності від потреб додатка.
Використання addEventListener() починається з визначення типу події, на яку потрібно реагувати, та функції обробника, яка буде викликана при її виникненні. Наприклад, для додавання реакції на клік по кнопці, можна використати наступний код:
document.getElementById('myButton').addEventListener('click', function() {
alert('Кнопка була натиснута');
});
У цьому прикладі, метод addEventListener() призначає анонімну функцію як обробник події click для кнопки з ідентифікатором myButton. При натисканні на кнопку відбудеться виклик функції, що виводить сповіщення.
Метод addEventListener() має три аргументи: тип події (type), обробник події (listener), та необов'язковий об'єкт параметрів (options), що може визначати додаткову поведінку, таку як capture, once, і passive. Наприклад, якщо потрібно, щоб обробник події викликався лише один раз, можна використати параметр once:
window.addEventListener('resize', function() {
console.log('Вікно було змінено');
}, { once: true });
У цьому випадку, обробник події для зміни розміру вікна буде викликаний лише один раз, незалежно від кількості подій зміни розміру, що відбуваються.
Більш складний сценарій використання addEventListener() може включати роботу з кастомними подіями або управлінням декількома обробниками для однієї події. Наприклад, можливо додати кілька слухачів подій до одного елементу для різних цілей:
const btn = document.getElementById('myButton');
btn.addEventListener('click', firstFunction);
btn.addEventListener('click', secondFunction);
Тут firstFunction та secondFunction будуть викликані обидві, коли користувач натисне на кнопку, дозволяючи реалізувати більш комплексну логіку обробки подій.
Ключ до ефективного використання addEventListener() лежить у розумінні потоку подій в JavaScript і здатності керувати цим потоком за допомогою різних параметрів і методів. Це дозволяє розробникам створювати інтерактивні веб-додатки, що відреаговують на дії користувачів у передбачуваний і контрольований спосіб.
- Порада
-
Перед додаванням обробника події за допомогою методу
автор: BondaddEventListener(), важливо зрозуміти, що кожна подія має своє унікальне ім'я, яке необхідно вказати як перший аргумент. Наприклад, для реагування на кліки миші використовують подіюclick. Це дозволяє точно специфікувати, на яку подію слухач має реагувати. - Порада
-
Коли ви використовуєте
автор: BondaddEventListener(), другим аргументом передається функція обробник, яка буде викликана при настанні події. Ця функція може бути анонімною або може бути посиланням на заздалегідь визначену функцію. Використання іменованої функції може полегшити видалення обробника події у майбутньому за допомогою методуremoveEventListener(). - Порада
-
Для забезпечення більш тонкого контролю над обробкою подій,
автор: BondaddEventListener()дозволяє вказати третій параметр - об'єкт опцій. Наприклад, встановлення властивостіcaptureуtrueзмінює порядок, у якому подія буде перехоплена, роблячи його зверху вниз, замість стандартного знизу вгору. Це може бути корисним для деяких складних сценаріїв обробки подій. - Порада
-
Важливо пам'ятати про видалення обробників подій, коли вони більше не потрібні, щоб уникнути витоку пам'яті. Це особливо актуально для додатків з динамічними елементами користувацького інтерфейсу. Видалення виконується за допомогою методу
автор: BondremoveEventListener()і вимагає точної відповідності між аргументами, що були використані при додаванні обробника.
Синтаксис
addEventListener(type, listener)
addEventListener(type, listener, options)
addEventListener(type, listener, useCapture)Параметри
type-
Рядок, чутливий до регістру, який представляє тип події для прослуховування.
автор: Bond listener-
Об'єкт, який отримує повідомлення (об'єкт, що реалізує інтерфейс
автор: BondEvent), коли відбувається подія вказаного типу. Має бутиnull, об'єктом з методомhandleEvent()або функцією JavaScript. options-
Об'єкт, який визначає характеристики слухача події. Включає параметри для налаштування поведінки слухача.
автор: Bond useCapture-
Булеве значення, що вказує, чи будуть події цього типу розповсюджуватися до зареєстрованого слухача перед тим, як до будь-якого
автор: BondEventTargetпід ним у DOM-дереві. Якщо не вказано, за замовчуванням приймає значенняfalse. wantsUntrusted-
Параметр специфічний для Firefox (Gecko). Якщо
автор: Bondtrue, слухач отримує синтетичні події, що розповсюджуються веб-контентом (за замовчуваннямfalseдля браузерного хрому іtrueдля звичайних веб-сторінок). Цей параметр корисний для коду, що знаходиться в додатках, а також самому браузеру.
Повернення
none-
Повертає
автор: Bondundefined.
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 7 | 12 | 9 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 1 | 18 | 4 | 1 |
| Переглядач |  |
 |
|---|---|---|
| 14.5.0 | 1.0 |
Приклади
+ запропонувати свій приклад у пісочниці
У цьому прикладі ми розглянемо просте застосування методу addEventListener() для відстеження подій кліку мишею на HTML елементі. Використання цього методу дозволяє зареєструвати обробник подій, який буде викликаний кожного разу, коли на вказаний елемент буде здійснено клік. Це базовий приклад, який демонструє реєстрацію слухача подій на елементі та виклик функції обробки цих подій.
HTML
<button id="myButton">Натисни</button>JS
// Знаходимо елемент за його ідентифікатором
const button = document.getElementById('myButton');
// Реєструємо слухача подій для обробки кліку мишею
button.addEventListener('click', function() {
alert('Кнопка була натиснута!');
});У цьому складнішому прикладі ми використаємо addEventListener() для зміни кольору фону елемента при наведенні курсору миші на нього та повернення оригінального кольору, коли курсор покидає межі елемента. Цей приклад демонструє роботу з двома різними типами подій (mouseover та mouseout), а також зміну стилів DOM-елементів відповідно до дій користувача.
HTML
<div id="myDiv">Демонстраційний елемент</div>JS
// Отримуємо доступ до елемента
const divElement = document.getElementById('myDiv');
// Функція для зміни кольору фону
function changeBackgroundColor(color) {
divElement.style.backgroundColor = color;
}
// Реєструємо слухача для події наведення курсору миші
divElement.addEventListener('mouseover', function() {
changeBackgroundColor('lightblue');
});
// Реєструємо слухача для події виходу курсору з елемента
divElement.addEventListener('mouseout', function() {
changeBackgroundColor('transparent');
});У цьому прикладі ми маємо дві кнопки: одна для зміни тексту усередині елемента div з ідентифікатором demo, а інша для зміни кольору фону цього ж елемента. Кожна кнопка використовує метод addEventListener() для прив'язки відповідної функції, що викликається при кліку на кнопку. Це демонструє, як за допомогою JavaScript можна додавати інтерактивність на веб-сторінку, реагуючи на дії користувача.
Коментарі
Коментарів ще немає — будьте першим!