Обробники подій в JS (як працює addEventListener)

У цій статті ми з вами розберемося як правильно використовувати обробники подій (addEventListener) в Javascript на різних елементах Дім дерева сторінок. Ці елементи можуть містити кнопки, посилання, зображення і таке інше.

Будь-який DOM елемент запускає подіяколи ми з ним якось взаємодіємо (Кликаємо, наводимо мишу та ін.). Обробники подій в JS використовуються для того, щоб реагувати на ці події.

Обробники подій можна "вішати" на будь-які елементи DOM (Data Object Model) дерева, а також глобальні об'єкти window та document.

Припустимо, на нашій сторінці є html елемент button із класом "btn":

1div
class="wrapper">
2
button
class="btn">Click/button>
3
/div>

Давайте виділимо наш елемент button і надамо його змінній button:

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

Щоб повісити обробник подій на наш елемент button, потрібно використовувати спеціальний метод - addEventListener. Цей метод приймає 2 аргументи:

1. Тип події (ми будемо "слухати" подію "click").
2. Так звану колбек (Callback) функцію, яка запускається після спрацьовування необхідної події.

Колбек функція (callback function) - відрізняється від звичайної функції тим, що її запускаємо не ми, а браузер, який робить це після спрацювання події.

1const
button
=
document.querySelector('.btn');
2button.addEventListener('click',
function
()

3
console.log('click');
4
>);

Таким чином, щоразу після спрацювання подіїclick"запускатиметься наша коллбек функція і ми будемо отримувати рядок "click" у нашій консолі.

Обробники подій JS (виносимо логіку коллбек функції за межі методу addEventListener)

Ми також можемо винести нашу коллбек функцію за межі методу addEventListener, а всередині обробника подій просто посилатися на неї:

1const
button
=
document.querySelector('.btn');
2
3
function
handleClick()

4
console.log('click');
5
>
6button.addEventListener('click',
handleClick);

Плюс такого підходу полягає у тому, що тепер ми легко можемо повторно використовувати логіку нашого оброблювача подій для інших елементів дерева дерева.

Давайте використовувати готову логіку у функції handleClick – для нової кнопки:

1div
class="wrapper">
2
button
class="btn">Click/button>
3
button
class="btnTwo">Click
2/button>
4
/div>

1const
button
=
document.querySelector('.btn');
2
const
buttonTwo
=
document.querySelector('.btnTwo');
3
4
function
handleClick()

5
console.log('click');
6
>
7button.addEventListener('click',
handleClick);
8
9
// Вішаємо обробник подій із готовою логікою на нову кнопку
10buttonTwo.addEventListener('click',
handleClick);

Як зняти обробник події addEventListener з елемента?

Щоб зняти обробник події з будь-якого елемента, потрібно використовувати метод removeEventListener. Як аргументи потрібно вказати не тільки назва події ("click"), але і назва коллбек функції, яка прив'язана елемента.

1buttonTwo.removeEventListener('click',
handleClick);

Метод removeEventListener не спрацює, якщо як коллбек функції використовувати безіменну функцію, оскільки буде відсутні можливість послатися її у.

Обробка подій на кількох DOM елементах

Як використовувати обробник подій addEventListener, коли нам потрібно використовувати його відразу на кількох елементи?

Припустимо, на нашій сторінці є 5 кнопок з класом "btn":

1div
class="wrapper">
2
button
class="btn">Click
1/button>
3
button
class="btn">Click
2/button>
4
button
class="btn">Click
3/button>
5
button
class="btn">Click
4/button>
6
button
class="btn">Click
5/button>
7
/div>

У цьому випадку можна використати 2 підходиповісити на них обробник подій.

Підхід 1. Використовуємо окрему addEventListener для кожної кнопки

Тут ми можемо виділити всі кнопки з однаковим класом та привласнити їх змінні buttons. Далі нам потрібно використовувати цикл forEach, щоб пробігтися по кожною кнопки в отриманому списку і повісити на неї обробник подій addEventListener.

1const
buttons
=
document.querySelectorAll('.btn');
2
3
function
handleClick()

4
console.log('click');
5
>
6
7buttons.forEach((button)
=>

8
button.addEventListener('click',
handleClick);
9
>);

2. Делегування події (Event delegation)

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

Тобто ми можемо повісити обробник подій на батьківський div з класом "wrapper", та обробляти події, які активуються на дочірніх елементах button.

Це можливо завдяки механізму, який називається "спливання" (bubbling) в Javascript, який означає, що якщо подія спрацьовує на якомусь елементі, вона також спрацьовує на всіх батьківських елементах.

Усередині нашої коллбек функції у нас є доступ до об'єкта "Подія"(Event), всередині якого ми можемо використовувати властивість target, щоб отримати елемент, на який ми клікнули.

1const
wrapper
=
document.querySelector('.wrapper');
2
3
function
handleClick(e)

4
console.log('click',
e.target);
5
// При натисканні отримуємо кожен конкретний елемент button
6
// click  
7
// click  
8
>
9
10wrapper.addEventListener('click',
handleClick);

Прототипне наслідування Javascript (+ відео з прикладом)

Підняття в JS (Hoisting в Javascript + 3 приклади)

Додавання слухача подій у JavaScript

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

Переваги використання addEventListener

Порівняно зі застарілим методом onEvent, використання addEventListener надає наступні переваги:

• Можливість призначати кілька функцій одну подію без перезапису попередньої функції;
• Більше зручне видалення слухачів подій.

Використання addEventListener

Для використання addEventListener необхідно спочатку отримати посилання на елемент DOM, до якого потрібно прив'язати слухач подій. Наприклад, ми можемо отримати посилання на кнопку з id "myButton" таким чином:

const button = document.getElementById("myButton");

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

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

Тепер, при кожному натисканні на кнопці з id "myButton", в консоль буде виводитися повідомлення "Кнопка була натиснута!".

Крім того, можна додати додаткові параметри до addEventListener, щоб вказати, який тип слухача подій використовувати. Наприклад, ви можете вказати "true" як останній аргумент для використання слухача подій захоплення (capture), або "false" або опустити аргумент для використання слухача подій спливання (bubbling). Захоплення та спливання є двома різними способами обробки подій, які можуть бути корисними у різних сценаріях.

Ось приклад, який показує використання спливаючого слухача подій:

button.addEventListener("click", function() < console.log("Кнопка була натиснута!"); >, false);

У цьому прикладі ми вказали значення "false" для використання слухача подій спливання.

Крім того, addEventListener можна використовувати не тільки на елементах DOM, але і на об'єктах window або document. Наприклад, ви можете використовувати слухач подій вікна для виконання певних завдань під час завантаження сторінки або зміни розміру вікна:

window.addEventListener("load", function() < console.log("Сторінка була завантажена!"); >); window.addEventListener("resize", function() < console.log("Розмір вікна було змінено!"); >);

У цих прикладах ми додаємо слухачі подій "load" і "resize" на об'єкт window та прив'язуємо до них функції, які виконуються при завантаженні сторінки та зміні розміру вікна відповідно.

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

Сподіваюся, ця розгорнута відповідь допоможе вам краще зрозуміти принцип роботи та приклади використання addEventListener у JavaScript.

Що таке слухач подій?

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

У чому полягає синтаксис функції слухача подій?

Функція слухача подій має ті ж характеристики, що й інші функції JavaScript. У разі активації ця функція виконує необхідні дії для обробки події. Наприклад, завдяки функції слухача подій можна змінювати текст, збирати інформацію з реєстраційних форм або зберігати дані в базах даних.

Синтаксис слухача подій

Функція слухача подій відповідає правильному синтаксису JavaScript, як у прикладі.

document.getElementById("textdisplay1").innerHTML += "MouseClick happened" ;

У цьому прикладі показано функцію слухача подій RespondMouseClick. Зазвичай назва функції пишеться так, щоб вона відповідала призначенню слухача. У функції ви пишете коди для виконання певних дій під час події. У цьому прикладі функція додає текст MouseClick happened до HTML-елементу textdisplay1.

Синтаксис обробника подій

В якості альтернативи ви можете використовувати функцію обробника подій для відповіді на активовану подію, як показано в наведеному нижче прикладі.

if (event.type === "fullscreenchange")

console.log (“full screen toggle”);