Q&A
Closed
使用例で2パターン見つけたのですが、DOMContentLodedは以下のどちらの記述が正しいのでしょうか。
また、どちらも正しいのであれば関数の実行タイミングなどどのような違いがあるのでしょうか。
document.addEventListener("DOMContentLoaded", function() {
})
window.addEventListener("DOMContentLoaded", function() {
})
期待通り動くという点ではどちらも正しいです。本来 DOMContentLoaded イベントが Document を対象とすることを考えると、前者の方がより正しいといえるかもしれません。
このイベントの本来の対象は、読み込まれた Document です。このイベントを Window からキャプチャやバブリングの過程で待ち受けすることができます。このイベントについての全般的な詳細は、 Document: DOMContentLoaded イベントのページをご覧ください。
実行タイミングは、 DOMContentLoaded イベントが起きるとまず Document に登録されたベントリスナーがすべて呼ばれ、その直後に Window に登録されたイベントリスナーがすべて呼ばれます。1
他の違いとして、
.addEventListener("DOMContentLoaded", function(event) { ... })
で受け取った event について、 event.currentTarget が document になるか window になるかの違いがあります。
これはバブリングフェーズの話です。キャプチャリングフェーズだと逆順になりますが、普通は気にしなくて構いません。フェーズについて詳しくは https://www.javadrive.jp/javascript/event/index10.html を読んでください。 ↩
@Kei05
Questioner
どちらも間違いではありません。
正確にはDOMContentLoadedが発生するのはdocumentで、バブリングでwindowに伝搬します。
