Hendelsesdykking i JavaScript

I tillegg til hendelsesbobling finnes det også dykking. Faktisk går en hendelse først fra toppen og nedover (fangststadiet), når vårt element (målstadiet) og først deretter begynner å boble opp (boblingsstadiet).

For å sette på en hendelseshåndterer med hensyn til fangststadiet i addEventListener finnes det en tredje valgfri parameter. Hvis den er true - vil hendelsen utløses på fangststadiet, og hvis false - på boblingsstadiet (dette er standard). La oss se på et eksempel:

javascriptelem1.addEventListener('click', function() {
  console.log('grønn - dykking');
}, true);
elem1.addEventListener('click', function() {
  console.log('grønn - bobling');
}, false);

elem2.addEventListener('click', function() {
  console.log('blå - dykking');
}, true);
elem2.addEventListener('click', function() {
  console.log('blå - bobling');
}, false);

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

Du kan sjekke: