Tapahtumien upottaminen JavaScriptissä

Tapahtumien kuplimisen lisäksi on olemassa myös upottaminen. Itse asiassa tapahtuma kulkee ensin ylhäältä alas (kaappausvaihe), saavuttaa meidän elementtimme (kohdevaihe) ja vasta sitten alkaa kuplia (kuplimisvaihe).

Jotta tapahtumankäsittelijä voidaan asettaa ottaen huomioon kaappausvaiheen, addEventListener:ssä on kolmas valinnainen parametri. Jos se on true - tapahtuma laukeaa kaappausvaiheessa, ja jos false - kuplimisvaiheessa (tämä on oletusarvo). Katsotaanpa esimerkkiä:

javascriptelem1.addEventListener('click', function() {
  console.log('vihreä - upottaminen');
}, true);
elem1.addEventListener('click', function() {
  console.log('vihreä - kupliminen');
}, false);

elem2.addEventListener('click', function() {
  console.log('sininen - upottaminen');
}, true);
elem2.addEventListener('click', function() {
  console.log('sininen - kupliminen');
}, false);

elem3.addEventListener('click', function() {
  console.log('punainen - upottaminen');
}, true);
elem3.addEventListener('click', function() {
  console.log('punainen - kupliminen');
}, false);

Voit kokeilla: