Czym jest pojawienie się w JavaScript?

Mechanizm, w którym zdarzenie wywołane na elemencie DOM rozprzestrzenia się "w górę" hierarchii do jego elementów nadrzędnych aż do korzenia (document). Domyślnie większość zdarzeń przechodzi przez trzy fazy:

1. Faza przechwytywania: Zdarzenie przesuwa się w dół od korzenia do elementu docelowego. Nasłuchiwacze zdarzeń przypięci z opcją { capture: true } są aktywowane na tej fazie.
2. Faza docelowa: Zdarzenie dociera do elementu docelowego, na którym zostało wywołane. Nasłuchiwacze przypięte bezpośrednio do tego elementu są aktywowane.
3. Faza bubbling: Zdarzenie przesuwa się w górę od elementu docelowego do korzenia dokumentu. Domyślnie przypięte nasłuchiwacze (bez { capture: true } lub z { capture: false }) są aktywowane na tej fazie. To jest faza, w której występuje "bubbling" w klasycznym rozumieniu.

Bubbling pozwala na implementację delegacji zdarzeń, gdy jeden nasłuchiwacz na elemencie nadrzędnym obsługuje zdarzenia z wielu elementów potomnych.

Przykład:

// HTML:
// <div id="parent">
//   <button id="child">Kliknij mnie</button>
// </div>

const parent = document.getElementById('parent');
const child = document.getElementById('child');

parent.addEventListener('click', function() {
  console.log('Zdarzenie balowało do rodzica');
});

child.addEventListener('click', function() {
  console.log('Zdarzenie na elemencie docelowym (przycisk)');
});

// Kliknięcie na przycisk 'child' spowoduje:
// "Zdarzenie na elemencie docelowym (przycisk)"
// "Zdarzenie balowało do rodzica"

Metoda event.stopPropagation() może być użyta do zatrzymania dalszego rozprzestrzeniania się zdarzenia (zarówno w fazie przechwytywania, jak i balowania) po tym, jak zostało obsłużone przez bieżący nasłuchiwacz. Metoda event.stopImmediatePropagation() zatrzymuje balowanie i uniemożliwia wywołanie innych nasłuchiwaczy na tym samym elemencie. event.preventDefault() zapobiega domyślnemu działaniu przeglądarki związanym ze zdarzeniem, ale nie zatrzymuje jego rozprzestrzeniania się.