JavaScript

2021.09.28

読み込みが終わったら処理!onloadイベントの使い方と注意点について解説【JavaScript】

今回はJavaScriptのonloadイベントについて解説します!

JavaScript初心者がよくつまづいてしまうエラーについても解説するので、JavaScriptを学び始めた方は必見です!

onloadイベントとは?

onloadイベントはJavaScriptに用意されているイベント処理の一つです。

イベント処理は「クリックしたら〜」とか「スクロールしたら〜」とはさまざまなものがありますが、onloadイベントは「HTMLや画像などのページに表示するリソースを読み込んでから〜」というイベント処理になります。

HTMLや画像をJavaScriptで操作する場合、先に操作するHTML要素や画像が読み込まれている必要があるので、非常によく使用するイベントになります。

こちらについては、後ほどサンプルコードを用いて詳しく解説します!

onloadイベントの使い方

onloadイベントの書き方は以下の通り。

window.onload = function() {
  console.log("ページ読み込み完了")
}

{〜}内にHTMLや画像が読み込まれてたら実行したい処理を書きます。

JavaScriptが動かない?onloadイベントで解決するかも!

JavaScriptを書いていると、「記述は間違っていないはずなのに、なぜか動かない…」なんてことがよくあります。

例えば、以下のコードではエラーが出てしまいます。

<script>
    let button = document.getElementById('xxx');
    button.addEventListener('click', function(){
        console.log('Hello');
    });
</script>

<input type="button" value="button" id="xxx">

コンソールに以下のようなエラーが…

s

HTMLは上から順に読み込まれていきます。

スクリプトは「xxxというidがついた要素」を探そうとしますが、その時はまだ下の対象要素が読み込まれていないため、見つからずにエラーが出てしまいます。

もうおわかりかと思いますが、下のようにこのスクリプトをonloadイベントの中に入れてしまえば解決します!

onloadイベントを使用した場合

<script>
    window.onload = function () {
        let button = document.getElementById('xxx');
        button.addEventListener('click', function () {
            console.log('Hello');
        });
    }
</script>

<input type="button" value="button" id="xxx">

対象要素が下に書かれていたとしても、HTMLが読み込まれてからスクリプトを実行するのでちゃんと対象要素を見つけて問題なくスクリプトが動作します。

ちなみに、単純に対象要素よりもスクリプトが下にあればonloadイベントを使用しなくても大丈夫です。(上で説明した通り、HTMLは上から順に読み込まれていくため)

下にスクリプトを持ってきた場合

<input type="button" value="button" id="xxx">
<script>
    window.onload = function () {
        let button = document.getElementById('xxx');
        button.addEventListener('click', function () {
            console.log('Hello');
        });
    }
</script>

このような決まりがあることから、JavaScriptのコードは</body>の直前に書くことがいいとされています。

<head>~</head>内に書く場合は、onloadイベントを使用する必要があります。

HTMLが読み込まれたら実行するDOMContentLoadedイベントも紹介

説明したとおり、onloadイベントはHTMLを含め外部ファイル(画像やcssなど)すべてのリソースが読み込まれてから実行するという処理になります。

そのため順番としては最後となり、ちょっと遅すぎるなんて時もあります。

そんな時は、DOMContentLoadedイベントを使用しましょう。

document.addEventListener('DOMContentLoaded', function() {
  console.log("HTML読み込み完了")
});

DOMContentLoadedイベントは、HTMLが読み込まれたら実行するイベントで、画像などの外部ファイルを読み込む前に実行されます。

画像などを扱うスクリプトでなければ、こちらを使用してもOKです。

JavaScriptのonloadイベントのまとめ

以上、JavaScriptの代表的なイベント処理の一つ、「onloadイベント」について解説しました!

HTMLや画像が先に読み込まれていなくてエラーが起きてしまうのは、JavaScript初学者の方に特に多いつまづきポイントなので、必ず押さえておきましょう!

実際にloadイベントを使用している記事はこちら

関連記事

  • 2021.09.24

    JavaScriptの勉強におすすめの本7選【初心者〜上級者別に厳選】

    JavaScript

  • 2021.09.10

    JavaScriptの基礎をスピーディーに学べる!初心者におすすめの教本を紹介

    JavaScript

  • 2021.07.29

    【おすすめ書籍】一冊で固められる基礎!超欲張りな参考書

    CSS

    HTML5

    JavaScript

おすすめ記事

  • 2021.09.24

    JavaScriptの勉強におすすめの本7選【初心者〜上級者別に厳選】

    JavaScript

  • 2021.06.08

    簡単!蛍光ペンっぽいアンダーラインを引く方法

    CSS

    WordPress

  • 2021.09.29

    【簡単】プロのようなデザインが作れるツールCanva(キャンバ)のおすすめポイント

    その他

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

https://spiqa.design/

spiqa_design

質問・感想などはこちら!

REQUEST

ご意見、感想や記事のリクエストなど
メッセージお待ちしております!