なんとなし「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');
});この５種類が、どうも、あるぽい(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');
});どっちも動いて、どっちがよいかは不明。
最近のブラウザではdocument.onloadが完全に無くされました。
ってのを見つけたので、なんとなく、windowイベントにしておくのが無難なのかなぁ？？？
ってなわけで。
暫定トップは
window.addEventListener('DOMContentLoaded', function() {
alert('onload');
});この書き方、かなぁ。
