Mi az a felbukkanás JavaScriptben?

Az eseménykezelés azon mechanizmusa, amikor egy DOM-elemen indított esemény "felfelé" terjed a hierarchiában a szülőelemek felé egészen a gyökér (document). Alapértelmezés szerint a legtöbb esemény három fázison megy keresztül:

1. Elfogási (capturing) fázis: Az esemény lefelé halad a gyökértől a cél elemig. Az { capture: true } opcióval csatolt eseményfigyelők ebben a fázisban aktiválódnak.
2. Célfázis: Az esemény eléri a cél elemet, ahol indult. Az ehhez közvetlenül csatolt figyelők aktiválódnak.
3. Buborézás (bubbling) fázis: Az esemény felfelé halad a cél elemtől a dokumentum gyökérig. Alapértelmezés szerint a { capture: false } vagy anélkül csatolt figyelők ebben a fázisban aktiválódnak. Ez a klasszikus "bubbling" fázis.

A buborékozás lehetővé teszi az eseménydelegáció megvalósítását, amikor egy szülő elem egyetlen figyelője kezeli több gyermek elem eseményeit.

Példa:

// HTML:
// <div id="parent">
//   <button id="child">Kattints rám</button>
// </div>

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

parent.addEventListener('click', function() {
  console.log('Az esemény buborékol a szülő felé');
});

child.addEventListener('click', function() {
  console.log('Esemény a cél elemen (gomb)');
});

// A 'child' gombra kattintva a kimenet sorrendje:
// "Esemény a cél elemen (gomb)"
// "Az esemény buborékol a szülő felé"

Az event.stopPropagation() metódus használható az esemény további terjedésének megállítására (mind a capture, mind a bubbling fázisban), miután az aktuális figyelő kezelte az eseményt. Az event.stopImmediatePropagation() megállítja a bubbling-ot és megakadályozza, hogy ugyanazon az elemen más figyelők is aktiválódjanak. Az event.preventDefault() megakadályozza a böngésző alapértelmezett műveletét az eseménnyel kapcsolatban, de nem állítja meg az esemény terjedését.