Модуль 10 · Урок 38
Events, propagation і delegation
Event проходить capture, target і bubble phases. Handler читає target як origin, currentTarget як listener node; delegation працює лише зі scoped closest match і containment check.
addEventListenertargetBubblingDelegation
Listener і event object
list.addEventListener('click', (event) => {
const button = event.target.closest('button[data-action="remove"]');
if (!button || !list.contains(button)) return;
removeBook(button.dataset.id);
});Native button дає keyboard activation без custom key handler. closest враховує click на descendant, а containment не дозволяє accidental match поза root.
Default action не дорівнює propagation
| API | Meaning |
|---|---|
preventDefault() | Скасувати cancelable default action |
stopPropagation() | Зупинити рух event далі |
once | Listener видаляється після першого виклику |
signal | Lifecycle cleanup через AbortController |
Не блокуйте propagation «про всяк випадок». Form submit перехоплюйте лише коли app повністю обробляє local transition або submission.
Практика
Пройдіть propagation trace для click по button text, list whitespace і Enter-submit. Запишіть target/currentTarget, default action, delegated match і очікуваний state.
Офіційні джерела
Практична перевірка · урок 38 з 60
Закріпіть матеріал уроку
Три сценарні питання. Для зарахування уроку потрібно дати щонайменше дві правильні відповіді.