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 і здатності керувати цим потоком за допомогою різних параметрів і методів. Це дозволяє розробникам створювати інтерактивні веб-додатки, що відреаговують на дії користувачів у передбачуваний і контрольований спосіб.

Синтаксис

addEventListener(type, listener)
addEventListener(type, listener, options)
addEventListener(type, listener, useCapture)

Параметри

*type

Рядок, чутливий до регістру, який представляє тип події для прослуховування.

*listener

Об'єкт, який отримує повідомлення (об'єкт, що реалізує інтерфейс Event), коли відбувається подія вказаного типу. Має бути null, об'єктом з методом handleEvent() або функцією JavaScript.

options

Об'єкт, який визначає характеристики слухача події. Включає параметри для налаштування поведінки слухача.

useCapture

Булеве значення, що вказує, чи будуть події цього типу розповсюджуватися до зареєстрованого слухача перед тим, як до будь-якого EventTarget під ним у DOM-дереві. Якщо не вказано, за замовчуванням приймає значення false.

wantsUntrusted

Параметр специфічний для Firefox (Gecko). Якщо true, слухач отримує синтетичні події, що розповсюджуються веб-контентом (за замовчуванням false для браузерного хрому і true для звичайних веб-сторінок). Цей параметр корисний для коду, що знаходиться в додатках, а також самому браузеру.

Return

none

Повертає undefined.

Переглядачі

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

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

// Знаходимо елемент за його ідентифікатором
const button = document.getElementById('myButton');

// Реєструємо слухача подій для обробки кліку мишею
button.addEventListener('click', function() {
  alert('Кнопка була натиснута!');
});

// Отримуємо доступ до елемента
const divElement = document.getElementById('myDiv');

// Функція для зміни кольору фону
function changeBackgroundColor(color) {
  divElement.style.backgroundColor = color;
}

// Реєструємо слухача для події наведення курсору миші
divElement.addEventListener('mouseover', function() {
  changeBackgroundColor('lightblue');
});

// Реєструємо слухача для події виходу курсору з елемента
divElement.addEventListener('mouseout', function() {
  changeBackgroundColor('transparent');
});