Login
JavaScript

Як працює Event Listeners + шпаргалка по подіям

17 Nov 2022

Вступ

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

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

Я говорю про:

  • Поширення подій (Event Propagation)
  • Делегування подій (Event Delegation)

Давайте швидко розберемось що до чого.

Поширення подій (Event Propagation)

В нас є кнопка, яка вкладена в якийсь блок

example 1

example 1

Коли ми натискаємо кнопку, ми впевнені що події кліка спрацює на ній. І ми матимемо рацію, проте крім кнопки, подію отримає і весь ланцюжок батьківських елементів і навіть об'єкти document і window.

Чому так відбувається? Справа в тому, що подія кліка поширюється в 3 етапи:

  1. Фаза занурення (capturing phase) – починаючи з window, document та кореневого елемента, подія занурюється зверху вниз по DOM-дереву через предків кнопки, на якій сталася подія.
  2. Фаза цілі (target phase) – спрацювання події на елементі, на який клацнув користувач. В нашому випадку - це кнопка.
  3. Фаза спливання (bubble phase) – нарешті, подія спливає по ланцюжку предків кнопки, доки досягне кореневого елемента та об'єктів document і window

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

В методі addEventListener існує третій аргумент capture(boolean), який дозволяє нам перехоплювати події на різних етапах. 

elem.addEventListener(..., {capture: true})
// або просто "true", це скорочення для {capture: true}
elem.addEventListener(..., true)
  • Якщо аргумент false (за замовчуванням), то подія буде спіймана при фазі спливання.
  • Якщо аргумент true, то подію буде перехоплено під час фази занурення.

Ось дуже чудовий наглядний приклад як це працює - приклад

Отже, навіщо нам це знати? Ця інформація допоможе нам краще розуміти процесс делегування. Давайте розглянемо!

Делегування подій (Event Delegation)

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

example 2

example 2

Нам потрібно 3 кроки:

  1. Визначити загальний батьківський елемент, в нашому випадку це ("buttons-wrap")
  2. Повісити на нього івент
  3. Використовувати event.target для вибору цільового елемента.

Є 2 способи використання event.target для вибору ".btn":

За допомогою classList:

buttons-wrap.addEventListener('click', event => {
    if (event.target.classList.contains("btn")) {
      console.log('Click!');
    }
  });

Та за допомогою .matches(selector) - я чув цей спосіб полюбляє гугл

buttons-wrap.addEventListener('click', event => {
   if (event.target.matches(".btn")) {
     console.log('Click!');
   }
 });

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

А тепер після такої філософії, я пропоную розглянути практичну шпаргалку, яка допоможе нам у роботі

Шпаргалка по подіям

Розбиремо найпопулярніші у практиці

Події миші

  • click - одинарний клік (натиснута та відпущена кнопка миші)
  • dblclick - подвійний клік
  • contextmenu - клік правою кнопкою миші на елементі
  • mousewheel - натиснута кнопка миші в межах елемента
  • mousemove - переміщення курсору миші в межах елемента
  • mouseover / mouseout - курсор миші наведено на елемент (mouseover) або навпаки виведено за межі елемента(mouseout). Також подія спрацьовує на дочірні блоки - приклад.
  • mouseenter / mouseleave - схожа на mouseover / mouseout, але різниця в тому що вони не реагують на свої дочірні елементи, події спрацьовують лише для батьківського елемента - приклад

Події клавіатури

  • keydown - натиснута клавіша на клавіатурі
  • keypress - натиснуто та відпущено клавішу на клавіатурі
  • keyup - відпущена клавіша на клавіатурі

Події елементів форм

  • focus - елемент отримав фокусу (BUTTON, INPUT, LABEL, SELECT, TEXTAREA)
  • blur - втрата фокусу, тобто перехід до іншого елементу (BUTTON, INPUT, LABEL, SELECT, TEXTAREA)
  • change - зміна значень елементів форми. виникає після події blur (INPUT, SELECT, TEXTAREA)
  • reset - скидання даних форми (клік по кнопці [type="reset"]) (FORM)
  • select - виділення тексту у елементі (INPUT, TEXTAREA)
  • submit - надсилання даних форми (клік по кнопці [type="submit "]) (FORM)

Події вікна браузера

  • load - закінчено завантаження документа (BODY, FRAMESET)
  • error - помилка виконання сценарія (IMG, WINDOW)
  • move - переміщення вікна (WINDOW)
  • resize - зміна розмірів вікна (WINDOW)
  • scroll - прокрутка вікна або області елементу

Дякую за увагу!

0