Meerdere event handlers op een element in JavaScript

Als een element meerdere event handlers heeft voor dezelfde gebeurtenis, dan zullen ze allemaal worden uitgevoerd, zelfs als het bubbling wordt gestopt. Dat wil zeggen, stopPropagation voorkomt dat de gebeurtenis verder gaat, maar op het huidige element zullen alle handlers worden uitgevoerd. Zie het voorbeeld:

javascriptelem1.addEventListener('click', function() {
  console.log('groen');
});
elem2.addEventListener('click', function(event) {
  console.log('lichtblauw - eerste handler');
  event.stopPropagation(); // stop de bubbling
});
elem2.addEventListener('click', function() {
  console.log('lichtblauw - tweede handler'); // wordt toch uitgevoerd
});
elem3.addEventListener('click', function() {
  console.log('rood');
});

Je kunt het testen: