JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

【JavaScript入門】ページ読み込み時に関数を呼び出す方法（window.onloadの使い方）

ページの読み込み時に関数を呼び出したい場合は、window.onload を使用します。

window.onloadとは

window.onload は、HTMLドキュメントの解析だけでなく、画像やスタイルシートなどページ上のすべてのリソースの読み込みが完了したタイミングで発火するイベントハンドラです。ここに実行したい関数を代入することで、ページが完全に表示された直後に任意の処理を自動的に実行できます。

サンプルコード

以下のコードを実行すると、ページの読み込み時にJavaScript関数が呼び出され、アラートが表示されます。ぜひ実際に動作を確認してみてください。

<!DOCTYPE html>
<html>
   <body>
      <script>
         function alertFunction() {
            alert('ok');
         }
         window.onload = alertFunction;
      </script>
   </body>
</html>

ポイント：DOMContentLoadedとの違い

より早いタイミング、つまりDOMツリーの構築が完了した時点で処理を実行したい場合は、DOMContentLoaded イベントを使う方法もあります。

document.addEventListener('DOMContentLoaded', function () {
   // HTMLの解析が完了した時点で実行される
});

window.onload は画像などのリソース読み込み完了後に発火するのに対し、DOMContentLoaded はHTML解析直後に発火します。ページの表示速度を意識する場合は、用途に応じて両者を使い分けるのがおすすめです。

  1. クリックイベントでJavaScript関数を呼び出す方法をわかりやすく解説

    JavaScriptとHTMLのやり取りは、ユーザーやブラウザがページを操作した際に発生する「イベント」を通じて処理されます。たとえば、ページが読み込まれること自体もイベントの一つです。ユーザーがボタンをクリックすれば、そのクリックもイベントとして扱われます。このほかにも、キーボードのキーを押す、ウィンドウを閉じる、ウィンドウのサイズを変更するなど、さまざまな操作がイベントとして検出されます。onclickイベントとはonclick()イベントは、ユーザーがマウスの左ボタンをクリックした瞬間に発生するイベントです。フォーム送信前の入力値チェック（バリデーション）や、警告メッセージの表示など、ク

  2. JavaScriptのcall()メソッドとは？使い方と実行例をわかりやすく解説

    JavaScriptのcall()メソッドを使うと、あるオブジェクト向けに定義されたメソッドを、別のオブジェクトに対しても再利用できます。つまり、同じ関数をさまざまなオブジェクトから呼び出せるようになるのです。call()メソッドの大きな特徴は、引数（パラメータ）をカンマ区切りで個別に渡すという点です。これにより、thisの参照先を任意のオブジェクトに変更しながら、必要な値も同時に渡せます。call()メソッドの基本的な仕組みcall()は以下のような形式で使用します。関数名.call(thisArg, 引数1, 引数2, ...)第1引数（thisArg）：関数内でthisとして参照されるオ