ページが読み込まれたときにJSを発火させるには

f:id:endoakak:20200727195612j:plain

JavaScriptを使うときはページが読み込まれたときに発火させることが多いのですが、どうやらいろいろな書き方がありそうだったので調べてみました。

DOMについて

まずは基本。「ページが読み込まれる」とはどういうことなのか。この時点で完全に理解できているのか怪しいところではありますが、一応確認してみます。

DOMというのはDocument Object Modelの略です。サーバーからレスポンスとして送られてきたHTMLは、ブラウザで解析されてDOMツリーと呼ばれる階層構造を持ったデータに変換されます。それがCSSによって装飾されて見た目が整えられ、webページとして表示されるという仕組みです。

JavaScriptは主にこのDOMツリーに対して処理を行うのですが、その発動のタイミングがいくつかあるようです。

即時関数を使うと、DOMツリーの作成に関係なくすぐに発動します。即時関数はこのように、関数の後ろに引数を与え、全体を()で囲むだけで作れます。

(function() {
  // 処理
}(引数));

今のところそんなに急いで処理を行いたい場面がないのですが、いつか使う日が来るんですかね。

DOMツリーの作成後すぐに発動したいときは、DOMContentLoadedというイベントを指定します。

document.addEventListener("DOMContentLoaded", function() {
  // 処理
};

特に理由がなければこれを使うのが良いのではないかと思います。

DOMContentLoadedはDOMツリーが作成され次第発動するのに対し、こちらは画像まで読み込まれるのを待ってから発動します。

書き方は以下の通りです。

window.onload = function() {
  // 処理
};

window.addEventListener("load", function() {
  // 処理
};

上の二つの書き方は発動のタイミングは同じですが、わずかに違うことがあります。onloadは変数に値（関数）を代入する形なので複数のイベントを生成することはできず、最後に代入した処理のみが実行されます。

例えば以下のような書き方をすると、処理３のみが実行され処理１と２は消えてしまいます。

window.onload = function() { 処理１ };
window.onload = function() { 処理２ };
window.onload = function() { 処理３ };

そのため、特別理由がなければaddEventListener("load",を使うのが無難そうです。