JavaScript jsファイルを指定したscriptタグを動的にDOMに追加する

Question

前提・実現したいこと

jsファイルを指定したscriptタグを動的にDOMに追加しました
jsファイルの中身のaddEventListener DOMContentLoadedが実行されません
どうしたら実行できますでしょうか

該当のソースコード

<script>
var script = document.createElement('script');
script.src = 'script.js';
document.body.appendChild(script);
</script>

script.js

window.addEventListener('DOMContentLoaded', function() {
alert("hello");
});

Comments

[m.ts10806]

DOMContentLoaded
がどういうイベントなのか理解された上でしょうか。

Answer 1

JavaScriptでsrcありの<script>を生成してHTMLに挿入した場合、srcのファイルを読み込んだタイミングで実行されることとなります。つまり、DOMContentLoadedとどちらが先になるかは状況依存です。

alertだけなど、特にDOMContentLoadedを待たなくていい用事なら、DOMContentLoadedを使わずに直書きしてしまいましょう。

Comments

[退会済みユーザー]

同じ動きを別に書こうとしていたから先に読まれた方しか動かなかったんですね

[maisumakun]

そういうわけではありません。DOMContentLoadedのハンドラを複数仕掛けることは何も問題ありません。

DOMContentLoadedはページ内で1回しか発生しないので、発生後にイベントハンドラを仕掛けても呼ばれる機会が来ないと言うだけです。

[退会済みユーザー]

単純に
window.addEventListener('DOMContentLoaded', function() {
alert("hello1");
});
window.addEventListener('DOMContentLoaded', function() {
alert("hello2");
});
と書いても2回呼び出せないけど呼び方次第では呼び出せる、ということですね

[maisumakun]

> 単純に（中略）と書いても2回呼び出せない

いえ、単純に書けば動きます。イベントが「発生する」のは1回ですが、1回のイベントで複数のハンドラを動作させることは問題なく可能です。

[退会済みユーザー]

>DOMContentLoadedとどちらが先になるかは状況依存です。
言ってる事が違いませんか？

[maisumakun]

> 言ってる事が違いませんか？

「単純に書けば」というのを、「動的ロードせずに、HTMLへ最初から<script>を書いておく」という意味に解釈していました（すでに説明したように、「動的に<script>を生成する」際の動作は、まったく単純ではありません）。

1つあるか2つあるかは、問題には関係しません（「両方動くか両方動かないか」になって、「片方だけ動く」という事態にはなりません）。

Answer 2

script.jsの中身を

alert("hello");

の行だけにする

Answer 3

HTML の描画は Loading -> Scripting -> Rendering -> Painting の順で実行されます。
ブラウザレンダリングを理解するため簡単にまとめてみた - Qiita
一番目のスクリプトも二番目のスクリプトも Scripting の段階で実行されます。対して DOMContentLoaded というイベントは Loading の中にある「構文木の構築」が終了した段階で発火します。つまり普通に実行していたらイベントは受け取れないのです。おそらく意図している動作としては load （ページ全体の読み込みが終わったら発火）と書き換えるのがよいのではないのでしょうか。

余談。じゃあなんで DOMContentLoaded なんてイベント用意されてんじゃいって話なんですが、動的に DOM ツリーを構築する場合に発火されます。それはスクリプトによる構築だったり、外部ページの読み込みだったりです。なので使用用途としては結構特殊な部類に入るかもしれません。
理解が浅かったようですので取り下げます。

Comments

[maisumakun]

>HTML の描画は Loading -> Scripting -> Rendering -> Painting の順で実行されます。

その記事の内容自体が適切ではありません。asyncやdeferでないJavaScriptは、DOMツリーの構築と同時並行で実行されます。

> つまり普通に実行していたらイベントは受け取れないのです。

そんな事はありません。

[maisumakun]

https://momdo.github.io/html/parsing.html#overview-of-the-parsing-model

こちらの図にあるように、「Tree Construction」の途中に随時「Script Execution」が行われます。JavaScript内にdocument.write()があれば、その結果をHTMLとしてのパースに戻すことになります。