[ITEM 4] QUESTION: Что такое event delegation?

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

При спрацьовуванні такого загального обробника в об'єкті події завжди доступні дві ключові властивості: event.target та event.currentTarget. Властивість event.target вказує на конкретний елемент, на якому безпосередньо відбулася дія, наприклад, на конкретну кнопку всередині списку. Водночас event.currentTarget посилається на елемент, до якого прив'язаний сам обробник, тобто на батьківський контейнер. Різниця між цими властивостями лежить в основі роботи патерну.

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

Оскільки подія спливає від цільового елемента, обробнику на батьку часто потрібно зрозуміти, по якому саме елементу клікнули. Для фільтрації та перевірки елементів використовуються стандартні методи DOM API, такі як matches() та closest(). Метод matches('selector') перевіряє, чи відповідає елемент заданому CSS-селектору, а closest('selector') піднімається вгору від цільового елемента в пошуках найближчого предка, що задовольняє умову, що особливо зручно, якщо клік припав на іконку всередині кнопки.