JavaScript addEventListener() — обробник подій: click та інші

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

addEventListener() є методом інтерфейсу EventTarget, який дозволяє зареєструвати функцію-слухача для певного типу події на об'єкті. Цей метод широко використовується у веброзробці для обробки подій, таких як натискання клавіш, рухи миші, завантаження сторінки та взаємодія з елементами інтерфейсу. Він забезпечує гнучкий та потужний спосіб керування поведінкою веб-сторінок та додатків.

Метод addEventListener() приймає три аргументи: тип події, функція-слухач та опціональний об'єкт опцій. Тип події визначає, на яку подію буде реагувати функція-слухач. Це може бути стандартна подія, така як "click" або "keydown", або подія, визначена користувачем. Функція-слухач – це функція, яка буде викликана, коли відбудеться зареєстрована подія. Об'єкт опцій дозволяє налаштувати поведінку слухача, наприклад, визначити, чи повинна подія бути розповсюджена, або чи повинна функція-слухач бути викликана під час фази захоплення.

Ось простий приклад використання addEventListener() для обробки події натискання на кнопку:

const button = document.querySelector('button');

button.addEventListener('click', function() {
  console.log('Кнопку було натиснуто!');
});

У цьому прикладі ми знаходимо кнопку за допомогою document.querySelector('button') та додаємо слухача події click за допомогою addEventListener(). Коли користувач натискає на кнопку, викликається анонімна функція, яка виводить повідомлення в консоль.

addEventListener() також дозволяє зареєструвати кілька слухачів для однієї події на одному об'єкті. Це корисно, коли потрібно виконати кілька дій у відповідь на одну подію. Наприклад:

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

form.addEventListener('submit', function(event) {
  event.preventDefault(); // Зупиняємо відправлення форми за замовчуванням
  validateForm(); // Викликаємо функцію валідації форми
});

form.addEventListener('submit', function() {
  sendFormData(); // Викликаємо функцію для відправлення даних форми
});

У цьому прикладі ми реєструємо два слухачі події submit на формі. Перший слухач запобігає відправленню форми за замовчуванням та викликає функцію validateForm(). Другий слухач викликає функцію sendFormData() для відправлення даних форми.

addEventListener() також підтримує обробку подій, що розповсюджуються. Це означає, що слухач може реагувати на події, які відбуваються не лише на самому об'єкті, але й на його дочірніх елементах. Для цього потрібно передати третій аргумент – об'єкт опцій зі значенням capture або bubbles. Наприклад:

const container = document.querySelector('.container');

container.addEventListener('click', function(event) {
  console.log('Клік всередині контейнера');
}, { capture: true }); // Обробляємо події під час фази захоплення

У цьому прикладі слухач буде реагувати на події клацання не лише на самому контейнері, але й на будь-яких вкладених у нього елементах. Параметр capture: true вказує, що слухач повинен спрацьовувати під час фази захоплення події, коли подія розповсюджується від вікна до цільового елемента.

Крім того, addEventListener() дозволяє зареєструвати слухача, який буде викликатися лише один раз. Для цього потрібно передати об'єкт опцій зі значенням once: true. Наприклад:

const video = document.querySelector('video');

video.addEventListener('play', function() {
  console.log('Відео розпочато');
}, { once: true });

У цьому прикладі функція-слухач буде викликана лише один раз після першого натискання на кнопку відтворення відео.

Важливо зазначити, що addEventListener() додає нового слухача до списку слухачів події. Якщо потрібно видалити слухача, можна використати метод removeEventListener(), передавши ті самі аргументи, що й під час реєстрації слухача.

Підсумовуючи, addEventListener() є потужним інструментом для обробки подій у JavaScript. Він забезпечує гнучкість у керуванні поведінкою веб-сторінок та додатків, дозволяючи реєструвати кілька слухачів для однієї події, обробляти розповсюдження подій та налаштовувати поведінку слухачів за допомогою опцій. Правильне використання addEventListener() є ключовим для створення інтерактивних та реактивних веб-додатків.

правити

Опції: once, passive, signal

Третій аргумент приймає об'єкт опцій, і три з них варто знати напам'ять:

• { once: true } — обробник спрацює один раз і зніметься сам: не треба тримати посилання на функцію заради removeEventListener;
• { passive: true } — обіцянка не викликати preventDefault(). Для scroll і touchstart браузер перестає чекати на обробник, і прокрутка на мобільних стає помітно плавнішою;
• { signal } — обробник знімається, коли спрацює AbortController: один abort() знімає всі обробники компонента разом, і жоден не забувається.

Другий прийом, що заощаджує сотні обробників, — делегування: один обробник на контейнері замість обробника на кожному рядку списку. Елемент, по якому клікнули, визначається через event.target.closest('li') — і це працює навіть для рядків, доданих у список пізніше.

правити

Порада

Використовуйте опцію once: true в об'єкті опцій addEventListener(), якщо ви хочете, щоб слухач викликався лише один раз. Це може бути корисним для обробки одноразових подій, таких як завантаження сторінки або ініціалізація додатка.

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

Порада

Якщо ви маєте справу з подіями, що розповсюджуються, використовуйте опцію capture в об'єкті опцій addEventListener(), щоб визначити, чи слухач повинен спрацьовувати під час фази захоплення чи фази бульбашки. Це може бути корисним для правильної обробки подій у складних ієрархіях DOM.

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

Порада

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

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

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

Синтаксис

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

Параметри

type

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

автор: Bond

правити

listener

Об'єкт, який отримує сповіщення (об'єкт, що реалізує інтерфейс Event) при виникненні події вказаного типу.

автор: Bond

правити

options

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

• capture (необов'язковий): Логічне значення, що вказує, чи події цього типу будуть розповсюджуватися до зареєстрованого слухача перед розповсюдженням до будь-яких вкладених елементів у дереві DOM.
• once (необов'язковий): Логічне значення, що вказує, чи слухач повинен бути викликаний лише один раз, після чого він автоматично видаляється.
• passive (необов'язковий): Логічне значення, що вказує, чи обробник події ніколи не викликатиме preventDefault().
• signal (необов'язковий): Об'єкт AbortSignal, який дозволяє скасувати обробку події до її завершення.

Якщо об'єкт options не вказаний, за замовчуванням використовуються значення false для capture, once та passive, а signal не встановлюється.

автор: Bond

правити

Повернення

none

Повертає значення null,

автор: Bond

правити

Переглядачі

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

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

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

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

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

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

Переглядач
	14.5.0	1.0

Приклади

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

<div class="movable">перший елемент movable</div>
<div class="movable">другий елемент movable</div>

// Знаходимо елемент, який потрібно пересувати
const movableElement = document.querySelector('.movable');

// Змінні для відстеження стану
let isDragging = false;
let currentX;
let currentY;
let initialX;
let initialY;
let xOffset = 0;
let yOffset = 0;

// Функція для оновлення положення елемента
function updatePosition(x, y) {
  movableElement.style.left = `${x}px`;
  movableElement.style.top = `${y}px`;
}

// Слухачі подій клавіатури
document.addEventListener('keydown', function(event) {
  if (event.key === 'ArrowLeft') {
    xOffset -= 10;
  } else if (event.key === 'ArrowRight') {
    xOffset += 10;
  } else if (event.key === 'ArrowUp') {
    yOffset -= 10;
  } else if (event.key === 'ArrowDown') {
    yOffset += 10;
  }
  updatePosition(xOffset, yOffset);
});

// Слухачі подій миші
movableElement.addEventListener('mousedown', function(event) {
  isDragging = true;
  initialX = event.clientX - xOffset;
  initialY = event.clientY - yOffset;
});

document.addEventListener('mousemove', function(event) {
  if (isDragging) {
    currentX = event.clientX - initialX;
    currentY = event.clientY - initialY;
    updatePosition(currentX, currentY);
  }
});

document.addEventListener('mouseup', function() {
  isDragging = false;
});

// Функція для видалення всіх слухачів подій
function removeEventListeners() {
  document.removeEventListener('keydown', handleKeyDown);
  movableElement.removeEventListener('mousedown', handleMouseDown);
  document.removeEventListener('mousemove', handleMouseMove);
  document.removeEventListener('mouseup', handleMouseUp);
}

<button>Натисни</button>

// Знаходимо кнопку за допомогою селектора
const button = document.querySelector('button');

// Додаємо слухача події 'click' до кнопки
button.addEventListener('click', function() {
  console.log('Кнопку було натиснуто!');
});