【JavaScript】onloadイベントは複数回使用できない!対処法を解説

・JavaScriptでonloadイベントを複数回使ったらエラーが出てしまった・・・。
・対処法がわからない。
・onloadイベントを複数回使うには、どうすればいいの?

ページや画像の読み込みが完了した時点でイベントが実行されるonloadイベント。JavaScriptを学習していると必ず目にしますが、詳しい使い方を知らない人も多いでしょう。

そこでこの記事では、onloadイベントの使い方と複数回使用するときの注意点を解説します。

この記事を読めば、onloadの使い方やなぜ複数回使用できないのか、複数回使用するための方法などを理解できるでしょう。

onloadイベントのエラーにつまずいている、onloadイベントを複数回使える方法を知りたいという人は、ぜひ最後までご覧ください。

onloadイベントとは?

onloadイベントとはどういった働きを持つのか、詳しく知らない人も多いでしょう。

なのでここでは、onloadイベントについて解説しておきます。

※onloadイベントについて知っている人は読み飛ばして問題ありません。

onloadイベントはページや画像の読み込みが完了した時点で実行するもの

JavaScriptでよく見るonloadイベントは、ページや画像の読み込みが完了した時点で実行するものです。

読み込み後に、何か処理を実行したいときに役立つので、とても便利です。

onloadイベントは、windowやbody、imgタグなどに使われることが多いでしょう。

onloadイベントの基本的な使い方

では、onloadイベントの基本的な使い方を見ていきましょう。

onloadイベントの書き方は次の通りです。

onloadは「【指定したい要素】.onload」というようにドット(.)で繋いで書きます。

そして、それに関数を代入する形で書くのが一般的です。

※今回はアロー関数「() => {}」で書いていますが、普通の関数式「function() {}」でも問題ありません。

一度、onloadイベントの中に簡単な処理を書いてみましょう。

ページが読み込まれたら、consoleに上記の文字列が表示されるはずです。

結果をデベロッパーツールのconsoleで表示してみましょう。

ページが読み込まれたのと同時にconsoleに文字列が表示されましたね。

onloadイベントはこのように、ページを読み込んだ後に処理を実行することができます。

まずは、この基本的な使い方を覚えておきましょう。

onloadイベントは同じページ内で複数回使用できない

onloadイベントの使い方がわかりましたが、実は使う際に注意しなければならないことがあります。

それは、同じページ内で複数回使用できないということです。

実際に複数のonloadイベントを書いて、結果を表示してみましょう。

onloadイベントを3回書きましたが、consoleに表示されているのは最後に書いた文字列だけになっています。

これは、onloadイベントで書いた処理が上書きされてしまっているからです。

なので、複数回onloadイベントを使用すると、最後に書いた処理だけが実行されます。

注意
複数人でコードを書く際、知らない間に処理を上書きしてしまう恐れがあるので、気をつけましょう。

では、onloadイベントを複数使用するには、どうすればいいのでしょうか。

具体的な方法を次の項目で見ていきましょう。

onloadイベントを複数回使用する方法

onloadイベントを複数使用してエラーが出てしまった・・・。

その場合は、onloadイベントをaddEventListenerに置き換えることで解決できます。

実際の使い方を見ていきましょう。

addEventListenerに置き換える

addEventListenerに置き換えるには、次のようなコードになります。

windowの後にドットで繋いでaddEventListenerを書きます。

そして、イベントの種類をloadとし、中に処理を書いていきます。

結果をデベロッパーツールのconsoleで表示すると、次のようになるでしょう。

記述したonloadイベントが、すべて表示されていますね。

このように、addEventListenerに置き換えることで、複数のonloadイベントを使用することができます。

なので、使い方を覚えておきましょう。

DOMContentLoadedイベントを使用すると通常より速く動作する

ここで少し補足ですが、実はonloadイベントは遅い処理になります。

人間の目には一瞬の出来事なので、処理の速度の違いは見分けられませんが、onloadイベントはDOMのレンダリングや画像などの関連リソースをすべて読み込んだ後に処理されるのです。

そこで処理を速くできるもので、DOMContentLoadedイベントというものがあります。

これを使用することで、DOM構築が完了した時点で処理を実行することができます。

実際にコードに書いた方が理解しやすいと思うので、確認していきましょう。

先ほどと同じように、windowにaddEventListenerを指定します。

そして、3つ目の処理のイベントの種類をDOMContentLoadedとしましょう。

すると結果は次のようになります。

DOMContentLoadedを指定した3つ目の処理が一番最初に実行されているのがわかりますね。

一瞬の間でしたが、これでDOMContentLoadedの方が動作が速くなることがわかりました。

なので、使い方を覚えておくといいでしょう。

まとめ

今回は、JavaScriptでonloadイベントを複数回使用できない原因と、複数回使用する方法を解説しました。

onloadイベントは、複数書くと上書きされてしまい、最後に書かれたonloadイベントだけが実行されます。

そこで、addEventListenerに置き換えることで、onloadイベントを複数回使えるようになります。

なので、今後onloadイベントを複数回使う場合は、addEventListenerに置き換えるようにするといいでしょう。

この記事が、JavaScriptの学習に役立つと幸いです。