Javascript - 複数のカスタムイベントリスナー

Question

イベントが発生したときに私のウェブサイトの3つの異なる場所からコードを実行する必要があります。 3xリスナーを追加しましたが、何らかの理由で最初のリスナーだけが呼び出されます。

ここで私は、現時点ではテストしていたコードです：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); 

結果：

triggered 1triggered 2triggered 3 

：

triggered 1 

これは私が望んでいた結果であるが、

Answer 1

It document.writeは元のページを破壊し、したがって他のコードの実行を破棄します。

alert("triggered 1")またはconsole.log("triggered 1")のように他の方法で結果が設定されるように書き換えてください。

Answer 2

問題はdocument.write（）にあります。各コールは前のコールからの文字列をオーバーライドしており、1つだけが起動しているように見えます。 console.log（）またはdocument.body.innerHTML + = ""に変更すると、それらはすべて起動します。

write（）メソッドは主にテストに使用されます.HTMLドキュメントが完全に読み込まれた後に使用される場合、既存のHTMLはすべて削除されます。