Propagacja zdarzeń (Event Bubbling i Capturing)

Fazy propagacji zdarzenia:

1. Faza przechwytywania (Capturing / Trickling) – zdarzenie schodzi z obiektu window, przez document, body, aż do klikniętego elementu.
2. Faza celu (Target phase) – zdarzenie dociera do klikniętego węzła.
3. Faza bąbelkowania (Bubbling phase) – zdarzenie wędruje w górę po drzewie DOM do rodziców aż do window.

const przycisk = document.querySelector('#btn');
const rodzic = document.querySelector('#kontener');

przycisk.addEventListener('click', (e) => {
    console.log('Kliknięto przycisk!');
    // Zatrzymanie dalszego bąbelkowania w górę:
    e.stopPropagation();
});

rodzic.addEventListener('click', () => {
    console.log('Kliknięto kontener rodzica!');
});

e.target vs e.currentTarget:

• e.target – element, na którym bezpośrednio nastąpiło zdarzenie (np. kliknięty przycisk wewnątrz formularza).
• e.currentTarget – element, do którego aktualnie przypięty jest dany listener zdarzenia.

Najczęstsze pułapki na egzaminie INF.03:

• Domyślnie metoda addEventListener nasłuchuje w fazie bąbelkowania (trzeci parametr to false).