gallu’s blog

エンジニアでゲーマーで講師で占い師なおいちゃんのブログです。

いわゆる「ページ読み込み時のイベント」の拾い方

なんとなし「onloadイベント」って感じで雑に把握をしているんだけど。
いわゆる「初期処理を書く場所」でございます。

いや、これを書かずにフラットなJS書いて「スマホでうまく動かなくておいちゃんにヘルプ求められて、ふと思い立ってonload的なイベントの中にJSかいたら動いた」とかいう嘘くさい事例が実体験であるので、やっぱりまぁ、それなりに気になるわけですよはい。

でまぁ。
JavaScriptやっていないおいちゃんでも「なんか色々あったよねぇ」くらいには記憶をしていて、ただ逆に「どれがよいのか」とか全然記憶していないので。
なんか書いたらきっと「詳しい人が突っ込んでくれるはず!!」っていう雑な発想で(笑)、一端、ざっくりと調べてみようかなぁ、と。

とりあえずざっくり調べてみた。

<body onload="onload_func();">
window.onload = function() {
    alert('onload');
};
window.addEventListener('load', function() {
    alert('onload');
});
window.addEventListener('DOMContentLoaded', function() {
    alert('onload');
});
document.addEventListener('DOMContentLoaded', function() {
    alert('onload');
});

この5種類が、どうも、あるぽい(addEventListenerの第三引数にfalseって書いてあるところもあったんだけど、なんかデフォルトがfalseっぽいので一端気にしない)。

んで。

<body onload="onload_func();">

は、明示的に「駄目」って書いてある所はなかったんだけど、なんとなく最近の風潮からして「好まれない」ような気がするんだよなぁ。
気のせい??

window.onload = function() {
    alert('onload');
};

は明示的にNGっぽくて、端的には「複数のイベントハンドラが指定できない(後出し有効)」なので、色々とやばげ。

window.addEventListener('load', function() {
    alert('onload');
});

は割とあちこちで書いてあるし複数ハンドラも積めるんだけど(書いた順番に動くのは、保証されてるの???)。
どうも「loadイベント」自体が「画像とかcssとか、なんもかんも全部読み込み終わってから」なので、状況によっては「ちょいと重い」らしく、「気をつけて使えよ」くらいの事が書いてあった。


で、「HTMLの解析が終わった(画像とかCSSとかはしらん)」ってのが DOMContentLoaded ってイベントらしく、どうもコレが「現時点における正解」ぽい。
ただ

window.addEventListener('DOMContentLoaded', function() {
    alert('onload');
});
document.addEventListener('DOMContentLoaded', function() {
    alert('onload');
});

どっちも動いて、どっちがよいかは不明。

http://www.phenomena.co.jp/blog/2015/04/14/window-document-body-%E3%81%AEonloadonready%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%81%AE%E3%81%9D%E3%82%8C%E3%81%9E%E3%82%8C%E3%81%AE%E9%81%95%E3%81%84%E3%81%AE%E8%A7%A3%E8%AA%AC/

最近のブラウザではdocument.onloadが完全に無くされました。

ってのを見つけたので、なんとなく、windowイベントにしておくのが無難なのかなぁ???


ってなわけで。
暫定トップは

window.addEventListener('DOMContentLoaded', function() {
    alert('onload');
});

この書き方、かなぁ。