window.onloadについて

[結論]

window.onloadとは？

→ 「何らかの処理を待つ」ことで、実行タイミングを調整するイベント

→ ページ全体が読み込まれると起動される

→現在は古い手法と言われており、jQueryのload関数やaddEventListenerを使うことが多い

[目次]

window.onloadについて
実装例
使用するシチュエーション
参考にしたサイト

[本題]

JavaScriptを利用していると目にする機会があると思います。
今回はwindow.onload について解説します。

実装例

window.onload = function(){
//ここに読み込み完了時に実行してほしい処理を書く
}

使用するシチュエーション

あらかじめscriptタグ内にJavaScriptで関数を作成。
それを「bodyタグ」の「onloadイベント」で実行する。
「onloadイベント」を覚えると、JavaScriptの「書く場所」を意識しなくてもDOMを扱えるようになる。

引用元（

https://www.sejuku.net/blog/19754#windowonload

）

<head>
<script>
    window.onload = function() {
        var memo = document.getElementById('memo');

        memo.textContent = 'こんにちは！';
    }
</script>
</head>
<body>
    <p id="memo"></p>
</body>

を

<head>
</head>

<!-- bodyにonloadイベントを設定 -->
<body onload="start()">
    <p id="memo"></p>


    <script>
        function start() {
            var memo = document.getElementById('memo');

            memo.textContent = 'こんにちは！';
        }
    </script>
</body>