Javascript - Mehrere benutzerdefinierte Ereignislistener

Question

Ich muss Code von 3 verschiedenen Orten auf meiner Website ausführen, wenn ein Ereignis ausgelöst wird. Ich habe 3x Listener hinzugefügt, aber aus irgendeinem Grund wird nur der erste Listener aufgerufen.

Hier ist der Code, den ich im Moment testen bin: JSFiddle

window.addEventListener('tompina_event', function (e) { 
    document.write("triggered 1"); 
}); 

window.addEventListener('tompina_event', function (e) { 
    document.write("triggered 2"); 
}); 

window.addEventListener('tompina_event', function (e) { 
    document.write("triggered 3"); 
}); 



var evt = new CustomEvent('tompina_event'); 
window.dispatchEvent(evt); 

Ergebnis:

triggered 1 

Dies ist das Ergebnis, das ich gehofft hatte:

triggered 1triggered 2triggered 3 

Answer 1

Es funktioniert, aber die document.write zerstört die ursprüngliche Seite und damit die Ausführung von anderem Code.

Bitte überschreiben, so dass das Ergebnis auf eine andere Weise wie alert("triggered 1") oder console.log("triggered 1") eingestellt wird.

Answer 2

Das Problem ist mit document.write(). Jeder Aufruf überschreibt die Zeichenfolgen des vorherigen Aufrufs, und anscheinend wird nur einer ausgelöst. Wechseln Sie zu console.log() oder document.body.innerHTML + = "" und Sie werden sehen, dass alle feuern.

Die Methode write() wird hauptsächlich zum Testen verwendet: Wenn sie verwendet wird, nachdem ein HTML-Dokument vollständig geladen wurde, wird das gesamte vorhandene HTML gelöscht.