JavaScript の実行順
JavaScript の実行順が気になったので、
以下のような、簡単な html を作成。
(記載順は html 上での記述箇所の順番のとおり)
- head 部に alert 呼び出し
- head 部で onload イベント(window.onload)に alert 指定
- body タグで onload イベントに alert 指定
- body 部に alert 呼び出し
- 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 = 何かの関数名; ←() を省略
とか。
場合によっては、関数の戻りが
関数オブジェクトだったりもするので、
そのときは誤りにはならない!
間違った書き方してたせいで、
実験結果を変わっちゃって、余計混乱した。。