Метод addEventListener () - приклад коду прослуховувача подій JavaScript

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

Розуміння подій та обробників подій

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

Наприклад, коли браузер закінчує завантаження документа, loadсталася подія. Якщо користувач натискає кнопку на сторінці, тоді сталася clickподія.

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

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

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

addEventListener () Синтаксис

Ось синтаксис:

target.addEventListener(event, function, useCapture) 
  • target : елемент HTML, до якого ви хочете додати обробник подій. Цей елемент існує як частина об'єктної моделі документа (DOM), і ви можете дізнатись про те, як вибрати елемент DOM.
  • подія : рядок, що вказує назву події. Ми вже згадували loadта clickподії. Для цікавих, ось повний перелік подій HTML DOM.
  • function : визначає функцію, яка запускатиметься при виявленні події. Це магія, яка може дозволити вашим веб-сторінкам динамічно змінюватися.
  • useCapture : необов’язкове булеве значення (істинне чи хибне), яке вказує, чи слід виконувати подію у фазі захоплення або бульбашки. У випадку вкладених елементів HTML (наприклад, imgусередині a div) з приєднаними обробниками подій, це значення визначає, яка подія виконується першою. За замовчуванням для нього встановлено значення false, що означає, що спочатку виконується внутрішній обробник подій HTML (фаза бульбашок).

Приклад коду addEventListener ()

Це простий приклад, який я зробив, який показує вас addEventListener()у дії.

Коли користувач натискає кнопку, відображається повідомлення. Інший клік кнопки приховує повідомлення. Ось відповідний JavaScript:

let button = document.querySelector('#button'); let msg = document.querySelector('#message'); button.addEventListener('click', ()=>{ msg.classList.toggle('reveal'); }) 

Виконуючи синтаксис, показаний раніше для addEventListener():

  • target : елемент HTML зid='button'
  • function : анонімна (стрілка) функція, яка встановлює код, необхідний для розкриття / приховування повідомлення
  • useCapture : залишилось значення за замовчуваннямfalse

Моя функція здатна розкрити / приховати повідомлення, додавши / видаливши клас CSS під назвою "відкрити", який змінює видимість елемента повідомлення.

Звичайно, у своєму коді сміливо налаштовуйте цю функцію. Ви також можете замінити анонімну функцію власною іменованою функцією.

Передача події як параметра

Іноді ми можемо захотіти дізнатись більше інформації про подію, наприклад, про те, який елемент клацнули. У цій ситуації нам потрібно передати параметр події до нашої функції.

Цей приклад показує, як ви можете отримати ідентифікатор елемента:

button.addEventListener('click', (e)=>{ console.log(e.target.id) }) 

Тут параметром події є змінна з іменем, eале її легко можна назвати будь-яким іншим способом, наприклад "подією". Цей параметр є об'єктом, який містить різну інформацію про подію, таку як цільовий ідентифікатор.

Вам не потрібно робити нічого особливого, і JavaScript автоматично знає, що робити, коли ви передаєте параметр таким чином у свою функцію.

Видалення обробників подій

Якщо з якихось причин ви більше не хочете, щоб обробник подій активувався, ось як його видалити:

target.removeEventListener(event, function, useCapture); 

Параметри такі ж, як addEventListener().

Практика робить досконалим

Найкращий спосіб покращитися з обробниками подій - це потренуватися у власному коді.

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

Веселіться та йдіть, щоб зробити щось чудове!

Щоб отримати більше знань про веб-розробку, сприятливих для початківців, відвідайте мій блог на 1000 Mile World та стежте за мною у Twitter.