JS метод Element.addEventListener()

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

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() є ключовим для створення інтерактивних та реактивних веб-додатків.

Синтаксис

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

Параметри

*type

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

*listener

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

options

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

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

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

Return

none

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

Переглядачі

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

Приклади

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

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

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

// Знаходимо елемент, який потрібно пересувати
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);
}