From 485a9b1c691a7ebe8cb3d02501f9b2ab63d938bc Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 24 Aug 2021 13:15:07 +0900 Subject: Web/API/GlobalEventHandlers/onload を更新 (#2088) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 2021/07/13 時点の英語版に同期 --- .../web/api/globaleventhandlers/onload/index.html | 117 +++++++++++++-------- 1 file changed, 73 insertions(+), 44 deletions(-) (limited to 'files/ja') diff --git a/files/ja/web/api/globaleventhandlers/onload/index.html b/files/ja/web/api/globaleventhandlers/onload/index.html index 6165e41f7e..4d4f54793a 100644 --- a/files/ja/web/api/globaleventhandlers/onload/index.html +++ b/files/ja/web/api/globaleventhandlers/onload/index.html @@ -1,56 +1,85 @@ --- -title: window.onload +title: GlobalEventHandlers.onload slug: Web/API/GlobalEventHandlers/onload tags: - - DOM - - Gecko - - Gecko DOM Reference - - Window +- API +- Event Handler +- GlobalEventHandlers +- HTML DOM +- Property +- Reference +- onload +browser-compat: api.GlobalEventHandlers.onload translation_of: Web/API/GlobalEventHandlers/onload --- -
- {{ApiRef}}
-

概要

-

{{domxref("window")}} の load イベントに対応するイベントハンドラです。

-

構文

-
window.onload = funcRef;
+
{{ApiRef()}}

+
+
onload は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、{{domxref("Window")}}、{{domxref("XMLHttpRequest")}}、{{htmlelement("img")}} 要素などで発生した {{event("load")}} イベントを処理するイベントハンドラーです。

+
+
load イベントは指定されたリソースの読み込みが完了したときに発行されます。

+
+
構文

+
+
target.onload = functionRef;
 

-
-
例

-
window.onload = function() {
-  doSomething(); // DOM 構築後に実行したい関数の呼び出し
+
+
値

+
+
functionRef は、ウィンドウの load イベントが発行されたときに呼び出されるハンドラー関数です。

+
+
例

+
+
window.onload = function() {
+  init();
+  doSomethingElse();
 };
 

-
<!DOCTYPE html>
-<html lang="ja">
-<head>
-<meta charset="UTF-8" />
-<title>onload のテスト</title>
-
-<script>
-function load() {
-  alert("load イベントが発生しました。");
-}
-
-window.onload = load;
-</script>
-
-</head>
-<body>
-<p>文書の読み込みの完了時に load イベントが発生します。</p>
-</body>
+
+
<!doctype html>
+<html>
+  <head>
+    <title>onload test</title>
+    // ES5
+    <script>
+      function load() {
+        console.log("load イベントが検出されました。");
+      }
+      window.onload = load;
+    </script>
+    // ES2015
+    <script>
+      const load = () => {
+        console.log("load イベントが検出されました。");
+      }
+      window.onload = load;
+    </script>
+  </head>
+  <body>
+    <p>load イベントは、文書の読み込みが完了したときに発行されます。</p>
+  </body>
 </html>
 

-
注記

-
load イベントは文書のローディング工程の終了時に発生します。このイベントが発生した時点で、文書中の全てのオブジェクトは DOM 内にあり、全ての画像とサブフレームのロードは完了しています。

-
DOMContentLoaded や DOMFrameContentLoaded のような Gecko で定められた DOM イベント (※{{domxref("element.addEventListener()")}} でハンドリング可能) もありますが、これらは他のリソースのロード完了を待たずに発生するものです。つまり、 window.onload より先に発生します。

-
仕様

-
-
関連情報

+
+
メモ

+
+
load イベントは文書の読み込み工程の終了時に発行されます。このイベントが発行された時点で、文書中のすべてのオブジェクトが DOM 内にあり、すべての画像、スクリプト、サブフレームの読み込みが完了しています。

+
+
DOMContentLoaded や DOMFrameContentLoaded のような DOM イベント ({{domxref("EventTarget.addEventListener()")}} で扱うことが可能) もありますが、これらはこのページの DOM が構築された後、他のリソースの読み込みが完了する前に発行されます。

+
+
仕様書

+
+{{Specifications}}
+
+
ブラウザーの互換性

+
+
{{Compat}}

+
+
関連情報

+
 
-- 
cgit v1.2.3-54-g00ecf