Több eseménykezelő egy elemen JavaScriptben

Ha egy elemnek több eseménykezelője van ugyanarra az eseményre, akkor még a bubbling megállítása esetén is mindegyik végrehajtódik. Vagyis a stopPropagation megakadályozza az esemény továbbterjedését, de az aktuális elemen minden eseménykezelő lefut. Lásd a példát:

javascriptelem1.addEventListener('click', function() {
  console.log('zöld');
});
elem2.addEventListener('click', function(event) {
  console.log('kék - első eseménykezelő');
  event.stopPropagation(); // megállítjuk a bubblingot
});
elem2.addEventListener('click', function() {
  console.log('kék - második eseménykezelő'); // így is lefut
});
elem3.addEventListener('click', function() {
  console.log('piros');
});

Kipróbálhatod: