Mis on hüppelaud JavaScriptis?

Mehhanism, mille puhul DOM-elementi algatatud sündmus levib "üles" hierarhias kuni selle vanemate elementideni ja kuni juure (document). Enamik sündmusi läbib kolm faasi:

1. ** Püüdmise faas (Capturing phase):** Sündmus liigub alt üles, juurest sihtelemendini. Kuulajad, mis on seotud { capture: true }, töötavad selles faasis:
2. Sihtfaas (Target phase): Sündmus jõuab sihtelemendini, kus see algatati. Kuulajad, mis on otseselt seotud selle elemendiga, töötavad:
3. Väljalangemise faas (Bubbling phase): Sündmus tõuseb üles sihtelemendist kuni dokumendi juure. Tavaliselt seotud kuulajad, mis on { capture: false } või ilma selleta, töötavad selles faasis. See on klassikaline "väljalangemise" faas:

Väljalangemine võimaldab teostada sündmuste delegatsiooni, kus üks vanem element töötleb mitme lapse sündmusi.

Näide:

// HTML:
// <div id="parent">
//   <button id="child">Vajuta mind</button>
// </div>

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

parent.addEventListener('click', function() {
  console.log('Sündmus väljus vanemale');
});

child.addEventListener('click', function() {
  console.log('Sündmus sihtelemendil (nupul)');
});

// Kui klõpsate nupul 'child', väljundi järjekord on:
// "Sündmus sihtelemendil (nupul)"
// "Sündmus väljus vanemale"

event.stopPropagation() meetodit saab kasutada, et peatada sündmuse edasine levik (nii väljalangemine kui ka püüdmine) pärast selle töötlemist praegusel kuulajal. event.stopImmediatePropagation() peatab väljalangemise ja ei lase teistel sellel elemendil olevatel kuulajatel töötada. event.preventDefault() takistab brauseri vaikimisi tegevust, mis on seotud sündmusega, kuid ei peata selle levikut.