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 |
1 |
1 |
7 |
12 |
Переглядач | ||||
---|---|---|---|---|
1 |
18 |
4 |
1 |
Переглядач | ||
---|---|---|
14.5.0 |
1.0 |
Приклади
Приклад демонструє використання методу addEventListener()
в JavaScript для додавання обробника подій до кнопки. Коли користувач клацне на кнопку, виводиться повідомлення "Обробник події викликано!" в області результату.
У цьому прикладі ми демонструємо, як використовувати addEventListener()
для обробки події натискання на кнопку. Коли користувач натискає на кнопку, виводиться повідомлення в консоль.
// Знаходимо кнопку за допомогою селектора
const button = document.querySelector('button');
// Додаємо слухача події 'click' до кнопки
button.addEventListener('click', function() {
console.log('Кнопку було натиснуто!');
});
У цьому прикладі ми використовуємо addEventListener()
для обробки подій клавіатури та руху миші. Ми створюємо інтерактивну область, де користувач може пересувати елемент за допомогою клавіш зі стрілками або перетягуванням мишею. Ми також демонструємо, як видалити слухачів подій, коли вони більше не потрібні.
// Знаходимо елемент, який потрібно пересувати
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);
}