Javascript - Multiple custom Event Listeners

Question

I need to execute code from 3 different places on my website when an event gets triggered. I've added 3x listeners but for some reason only the first listener gets called.

Here's the code I'm testing at the moment: 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);

Result:

triggered 1

This is the result I was hoping for:

triggered 1triggered 2triggered 3

Any of those listeners will wipe the whole document out when it's fired for the first time. There wil be no elements to listen ... — Teemu
– Teemu, Commented Jan 4, 2017 at 12:52
use console.log() instead of document.wirte()cause you're overwriting the whole page. — Alexus
– Alexus, Commented Jan 4, 2017 at 12:54

Mouser · Accepted Answer · 2017-01-04 12:52:50Z

2

It works, but the document.write destroys the original page and thus the execution of other code.

Please rewrite so the result is set in an other way like alert("triggered 1") or console.log("triggered 1").

answered Jan 4, 2017 at 12:52

Mouser

13.3k3 gold badges30 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tompina Over a year ago

Wow, I was sure I was missing something obvious, but this is even embarrassing, thanks a ton! Works as intended!

drkibitz · Accepted Answer · 2017-01-04 13:12:34Z

1

The problem is with document.write(). Each call is overriding the strings from the previous call, and it appears that only one is firing. Change to console.log(), or document.body.innerHTML += "" and you will see them all firing.

The write() method is mostly used for testing: If it is used after an HTML document is fully loaded, it will delete all existing HTML.

answered Jan 4, 2017 at 13:12

drkibitz

5175 silver badges15 bronze badges

Collectives™ on Stack Overflow

Javascript - Multiple custom Event Listeners

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related