Kas yra iššokantis langas JavaScript?

Mechanizmas, kai DOM elemente inicijuotas įvykis plinta "aukštyn" per hierarchiją iki jo tėvų elementų ir iki pat šaknies (document). Dauguma įvykių pagal nutylėjimą praeina per tris fazes:

1. Gaudymo fazė (Capturing phase): Įvykis juda žemyn nuo šaknies iki tikslo elemento. Klausytojai, prijungti su { capture: true }, veikia šioje fazėje:
2. Tikslo fazė (Target phase): Įvykis pasiekia tikslinį elementą, kuriame jis buvo inicijuotas. Klausytojai, tiesiogiai prijungti prie šio elemento, veikia:
3. Vėlimo fazė (Bubbling phase): Įvykis kyla aukštyn nuo tikslo elemento iki dokumento šaknies. Klausytojai, prijungti pagal nutylėjimą (be { capture: true } arba su { capture: false }), veikia šioje fazėje. Tai yra klasikinė "vėlimo" fazė:

Vėlimas leidžia įgyvendinti įvykių delegavimą, kai vienas tėvų elementas apdoroja įvykius iš daugelio vaikų elementų.

Pavyzdys:

// HTML:
// <div id="parent">
//   <button id="child">Paspausk mane</button>
// </div>

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

parent.addEventListener('click', function() {
  console.log('Įvykis vėlavo iki tėvo');
});

child.addEventListener('click', function() {
  console.log('Įvykis tiksliniame elemente (mygtuke)');
});

// Paspaudus mygtuką 'child', išvesties seka bus:
// "Įvykis tiksliniame elemente (mygtuke)"
// "Įvykis vėlavo iki tėvo"

event.stopPropagation() metodas gali būti naudojamas sustabdyti tolesnį įvykio plitimą (tiek vėlimą, tiek gaudymą) po to, kai jis buvo apdorotas esamo klausytojo. event.stopImmediatePropagation() sustabdo vėlimą ir neleidžia kitiems to paties elemento klausytuvams įvykdyti. event.preventDefault() neleidžia naršyklės standartiniam veiksmui, susijusiam su įvykiu, bet nesustabdo jo plitimo.