てくてくテック☆

千里の道も一歩から。テック(Tech)の道をてくてく歩く。

JavaScript の実行順

JavaScript の実行順が気になったので、
以下のような、簡単な html を作成。
(記載順は html 上での記述箇所の順番のとおり)

  1. head 部に alert 呼び出し
  2. head 部で onload イベント(window.onload)に alert 指定
  3. body タグで onload イベントに alert 指定
  4. body 部に alert 呼び出し
  5. body 部で onload イベント(window.onload)に alert 指定

で、それそれが何番目に表示されたかが分かるよう、
alert 内で countUp 関数を呼び出して、
実行される順番がどうなるかを実験してみました。

↓countUp 関数

function countUp () {
    ++i;
    return i;
}

結果、実行順は 1→4→5 の順で、
2 の head 部で window.onload に指定した alert と
3 の body タグの onload で指定した alert は
表示されませんでした。

これで分かったのは、onload イベントを複数指定した場合は
そのうちの 1 つしか有効にならない、ということ。

さらに、5 をコメントアウトすると、
実行結果が 1→4→3 となったことから、

body 部 > body タグ > head 部

の順で優先されるようです。

おそらく、記述箇所が上のものから順に
onload イベントの設定がされていき、
2、3、5 と何回も上書きされた結果、
最終的に一番最後の 5 の設定が有効になった、と。

(メモ)実験中に発覚した誤り

window.onload = window.alert("abc");

とか

window.onload = 何かの関数名();

という記載は誤り。

文法上はおかしくはなくても、
上記は window.alert や何かの関数を実行した結果を
window.onload(onload イベント)に設定する、
という意味になる。

なので、書くならこう↓

window.onload = abc;

function abc () {
    window.alert("abc");
}

とか

window.onload = 何かの関数名; ←() を省略

とか。

場合によっては、関数の戻りが
関数オブジェクトだったりもするので、
そのときは誤りにはならない!

間違った書き方してたせいで、
実験結果を変わっちゃって、余計混乱した。。