Kas ir uznirstošais logs JavaScript?

Mehānisms, kurā DOM elements, kurā ir uzsākts notikums, izplatās "augšup" pa hierarhiju līdz tā vecākiem elementiem un līdz pat saknei (document). Lielākā daļa notikumu pēc noklusējuma pāriet caur trim fāzēm:

1. Noķeršanas fāze (Capturing phase): Notikums virzās no saknes uz mērķa elementu. Klausītāji, kas ir pievienoti ar { capture: true }, darbojas šajā fāzē:
2. Mērķa fāze (Target phase): Notikums sasniedz mērķa elementu, kur tas tika iniciēts. Klausītāji, kas ir tieši pievienoti šim elementam, darbojas:
3. Vilkšanas fāze (Bubbling phase): Notikums virzās no mērķa elementa uz augšu, līdz dokumenta saknei. Parasti pievienotie klausītāji, kas ir ar { capture: false } vai nav norādīti, darbojas šajā fāzē. Šī ir klasiskā "vilkšanas" fāze:

Vilkšana ļauj īstenot notikumu deleģēšanu, kad viens vecāku elements apstrādā notikumus no vairākiem bērnu elementiem.

Piemērs:

// HTML:
// <div id="parent">
//   <button id="child">Nospied mani</button>
// </div>

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

parent.addEventListener('click', function() {
  console.log('Notikums vilkās līdz vecākam');
});

child.addEventListener('click', function() {
  console.log('Notikums mērķa elementā (pogas)');
});

// Noklikšķinot uz pogas 'child', izvadīšanas secība būs:
// "Notikums mērķa elementā (pogas)"
// "Notikums vilkās līdz vecākam"

event.stopPropagation() metode var tikt izmantota, lai pārtrauktu turpmāku notikuma izplatīšanos (gan vilkšanu, gan noķeršanu) pēc tā apstrādes pašā klausītājā. event.stopImmediatePropagation() pārtrauc vilkšanu un neļauj citiem tā paša elementa klausītājiem darboties. event.preventDefault() novērš pārlūkprogrammas standarta darbību, kas saistīta ar notikumu, bet neaptur tā izplatīšanos.