[ITEM 3] QUESTION: Что такое event bubbling и capturing?

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

Перша фаза називається capturing або занурення. У цей момент подія починає свій шлях від кореневого об'єкта window вниз через усі проміжні батьківські елементи прямо до цільового елемента, на якому відбулася дія. За замовчуванням слухачі подій на цій фазі не спрацьовують, проте розробник може явно вказати браузеру перехоплювати події на етапі занурення. Для цього під час реєстрації обробника через метод addEventListener як третій аргумент передається логічне значення true або об'єкт із опцією capture: true.

Друга і основна фаза називається bubbling або спливання. Вона настає одразу після того, як подія досягла цільового елемента. На цьому етапі подія починає рухатися у зворотному напрямку — від цільового елемента вгору до його батьків, піднімаючись аж до об'єкта document та window. За замовчуванням усі стандартні події в JavaScript працюють саме в режимі спливання, що дозволяє обробляти дії на вищих рівнях ієрархії.

Для керування цим процесом передбачені спеціальні інструменти. наприклад, метод event.stopPropagation(), викликаний усередині обробника подій, повністю зупиняє подальше поширення події вгору або вниз по дереву DOM, запобігаючи спрацьовуванню аналогічних обробників на батьківських елементах. Це буває необхідно в складних інтерфейсах, коли клік по дочірній кнопці не повинен викликати клік по навколишній її картці.