Useita tapahtumankäsittelijöitä elementillä JavaScriptissä

Jos elementillä on useita käsittelijöitä yhdelle tapahtumalle, ne kaikki suoritetaan, vaikka kupliminen keskeytettäisiin. Toisin sanoen, stopPropagation estää tapahtuman etenemisen pidemmälle, mutta kaikki nykyisen elementin käsittelijät suoritetaan. Katso esimerkki:

javascriptelem1.addEventListener('click', function() {
  console.log('vihreä');
});
elem2.addEventListener('click', function(event) {
  console.log('sinivihreä - ensimmäinen käsittelijä');
  event.stopPropagation(); // pysäytetään kupliminen
});
elem2.addEventListener('click', function() {
  console.log('sinivihreä - toinen käsittelijä'); // toimii silti
});
elem3.addEventListener('click', function() {
  console.log('punainen');
});

Voit testata: