Begivenheds-dybdegående i JavaScript

Udover begivenhedsbobling er der også dybdegående. Faktisk går en begivenhed først fra toppen og ned (fangstfasen), når frem til vores element (målfasen) og begynder først derefter at boble op (boblingsfasen).

For at tilknytte en begivenhedshåndterer med hensyn til fangstfasen i addEventListener er der en tredje valgfri parameter. Hvis den er lig med true - vil begivenheden udløses i fangstfasen, og hvis false - i boblingsfasen (dette er standard). Lad os se på et eksempel:

javascriptelem1.addEventListener('click', function() {
  console.log('grøn - dybdegående');
}, true);
elem1.addEventListener('click', function() {
  console.log('grøn - bobling');
}, false);

elem2.addEventListener('click', function() {
  console.log('lyseblå - dybdegående');
}, true);
elem2.addEventListener('click', function() {
  console.log('lyseblå - bobling');
}, false);

elem3.addEventListener('click', function() {
  console.log('rød - dybdegående');
}, true);
elem3.addEventListener('click', function() {
  console.log('rød - bobling');
}, false);

Du kan afprøve det: