Ce este apariția în JavaScript?

Mecanismul prin care un eveniment inițiat pe un element DOM se propagă "în sus" prin ierarhie către elementele părinte, până la rădăcină (document). În mod implicit, majoritatea evenimentelor trec prin trei faze:

1. Faza de captare: Evenimentul coboară de la rădăcină către elementul țintă. Ascultătorii de evenimente atașați cu opțiunea { capture: true } se activează în această fază.
2. Faza țintă: Evenimentul ajunge la elementul țintă unde a fost inițiat. Ascultătorii atașați direct la acest element se activează.
3. Faza de bubbling: Evenimentul se ridică de la elementul țintă către rădăcina documentului. Ascultătorii atașați în mod implicit (fără { capture: true } sau cu { capture: false }) se activează în această fază. Aceasta este faza în care are loc "bubbling" în sensul clasic.

Bubbling permite implementarea delegării evenimentelor, când un singur ascultător pe un element părinte gestionează evenimentele de la mai multe elemente copil.

Exemplu:

// HTML:
// <div id="parent">
//   <button id="child">Apasă-mă</button>
// </div>

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

parent.addEventListener('click', function() {
  console.log('Evenimentul a bubuit până la părinte');
});

child.addEventListener('click', function() {
  console.log('Eveniment pe elementul țintă (buton)');
});

// La clic pe butonul 'child', secvența de ieșire va fi:
// "Eveniment pe elementul țintă (buton)"
// "Evenimentul a bubuit până la părinte"

Metoda event.stopPropagation() poate fi utilizată pentru a opri propagarea ulterioară a evenimentului (atât în faza de captare, cât și în cea de bubbling) după ce a fost gestionată de ascultătorul curent. Metoda event.stopImmediatePropagation() oprește bubbling-ul și împiedică alți ascultători de pe același element să fie activați. event.preventDefault() previne acțiunea implicită a browserului legată de eveniment, dar nu oprește propagarea sa.