window.addEventListener('DOMContentLoaded',...) を採用する理由

Question

• window.addEventListener DOMContentLoaded tag:javascript sort:updated-descに関連する質問・回答の検索結果(1ページ目)｜teratail
• JavaScript - window.addEventListenerとelement.addEventListenerで同じ要素のイベントを操作したいしたい｜teratail
• JavaScript - 関数でinnerHTMLを使えないようなエラーが出る。｜teratail

本人に質問して回答が得られなかった為、第三者視点の回答をお願いします。

window.addEventListener('DOMContentLoaded', listener, false);

上記コードのように、window.addEventListener に DOMContentLoaded のイベントリスナを定義するコードの回答を続けている方がいます。
特に何らかの条件があるわけではなく、一律に window.addEventListener を使用しており、document.addEventListener では動かないコードではないようです。
あえて、window.addEventListener を採用する理由(メリット等)としてどのようなものが考えられるでしょうか。

Answer 1

ページの状態を拾うのは一般的にwindowを利用するから、
windowで統一しておいたほうが混乱がないからです。
以下だとdoc dom→win dom→win load→win showとイベントが拾われていきます

window.addEventListener('pageshow', function(e){
  console.log("win show");
});
window.addEventListener('load', function(e){
  console.log("win load");
});
window.addEventListener('DOMContentLoaded', function(e){
  console.log("win dom");
});
document.addEventListener('pageshow', function(e){
  console.log("doc show"); //拾えない
});
document.addEventListener('load', function(e){
  console.log("doc load"); //拾えない
});
document.addEventListener('DOMContentLoaded', function(e){
  console.log("doc dom");
});

実際にはdoc domのときにはページのdomは解釈されています。
つまりdocumentがだめということではありません。

Comments

[think49]

> 以下だとdoc dom→win dom→win load→win showとイベントが拾われていきます

実行順を考える場合、イベントの実行順(DOMContentLoaded -> pageshow -> load)とバブリングフェーズの実行順(document -> window)は区別する事になると考えます。
window, document の違いはイベントの実行順に影響しません。

> ページの状態を拾うのは一般的にwindowを利用するから、

この考えは「ページ全体を表す場合は、document ではなく、window に統一した方が分かりやすい」というものでしょうか。
つまり、document を排除して、window に統一する…というような。

window.addEventListener('click', listener, false);
window.addEventListener('focus', listener, true);

Answer 2

https://codingrepo.com/javascript/2016/08/24/javascript-execution-order-domcontentloaded-load-window-document/

によるとwindow.addEventListener('load')は発生するがdocument.addEventListener('load')は発生しないそうです。
loadつながりで覚えているのではないでしょうか。

Comments

[think49]

イベントバブリングで window に伝播する DOMContentLoaded と、初めからイベント発生源が window の load では、動作原理が異なる部分はありますね。
発端となった方の認識は「ページの状態 = window」という事でした。

Answer 3

window.addEventListenerを採用する理由(メリット等)はないです。

DOMContentLoadedイベントは、最初のHTMLドキュメントの読み込みと解析が完了した時に、
スタイルシートや画像、サブフレームの読み込みが終わるのを待たずに発火するのだから
用途を考えたらdocument.addEventListener("DOMContentLoaded", 〜で間違いないです。
https://developer.mozilla.org/ja/docs/Web/Events/DOMContentLoaded
https://html.spec.whatwg.org/multipage/parsing.html#the-end

Comments

[think49]

> DOMContentLoadedイベントは、最初のHTMLドキュメントの読み込みと解析が完了した時に、スタイルシートや画像、サブフレームの読み込みが終わるのを待たずに発火する

ここまでは分かります。

> のだから、用途を考えたらdocument.addEventListener("DOMContentLoaded", 〜で間違いないです。

突然、結論にジャンプしているように読めて、過程が分かりません。

[think49]

↑の追加質問は上手い表現ではなかった為、追加質問の文面を修正しました。