2023/08/04 時点の英語版に基づき更新

files/ja/web/api/window/load_event/index.md

@@ -1,34 +1,35 @@
 ---
 title: "Window: load イベント"
+short-title: load
 slug: Web/API/Window/load_event
+l10n:
+  sourceCommit: 367358d6847aa1766344951207dfd79d5c073a66
 ---
 
 {{APIRef}}
 
-**`load`** イベントは、ページ全体が、スタイルシートや画像などのすべての依存するリソースを含めて読み込まれたときに発生します。これは {{domxref("Document/DOMContentLoaded_event", "DOMContentLoaded")}} が、ページの DOM の読み込みが完了すれば、リソースの読み込みが完了するのを待たずに発生するのと対照的です。
-
-<table class="properties">
-  <tbody>
-    <tr>
-      <th scope="row">バブリング</th>
-      <td>なし</td>
-    </tr>
-    <tr>
-      <th scope="row">キャンセル</th>
-      <td>不可</td>
-    </tr>
-    <tr>
-      <th scope="row">インターフェイス</th>
-      <td>{{domxref("Event")}}</td>
-    </tr>
-    <tr>
-      <th scope="row">イベントハンドラープロパティ</th>
-      <td>
-        {{domxref("GlobalEventHandlers/onload", "onload")}}
-      </td>
-    </tr>
-  </tbody>
-</table>
+**`load`** イベントは、ページ全体が、スタイルシートや画像などのすべての依存するリソースを含めて読み込まれたときに発生します。
+これは {{domxref("Document/DOMContentLoaded_event", "DOMContentLoaded")}} が、ページの DOM の読み込みが完了すれば、リソースの読み込みが完了するのを待たずに発生するのと対照的です。
+
+このイベントはキャンセル不可で、バブリングしません。
+
+> **メモ:** たとえ `bubbles` が `true` に初期化されていても、 `load` という名前のイベントはすべて `window` に伝搬しません。 `window` 上で `load` イベントを捕捉するには、 `load` イベントを直接 `window` に配信する必要があります。
+
+> **メモ:** メイン文書が読み込まれたときに配信される `load` イベントは `window` に配信されますが、 2 つのプロパティが変更されています。 `target` は `document` であり、`path` は `undefined` です。これら 2 つのプロパティは過去との互換性のために変更されています。
+
+## 構文
+
+このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
+
+```js
+addEventListener("load", (event) => {});
+
+onload = (event) => {};
+```
+
+## イベント型
+
+一般的な {{domxref("Event")}} です。
 
 ## 例
 
@@ -58,15 +59,20 @@ window.onload = (event) => {
 </div>
 
 <div class="event-log">
-  <label>Event log:</label>
-  <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea>
+  <label for="eventLog">Event log:</label>
+  <textarea
+    readonly
+    class="event-log-contents"
+    rows="8"
+    cols="30"
+    id="eventLog"></textarea>
 </div>
 ```
 
 ```css hidden
 body {
   display: grid;
-  grid-template-areas: "control  log";
+  grid-template-areas: "control log";
 }
 
 .controls {
@@ -94,29 +100,29 @@ button {
 }
 ```
 
-#### JS
+#### JavaScript
 
 ```js
 const log = document.querySelector(".event-log-contents");
 const reload = document.querySelector("#reload");
 
 reload.addEventListener("click", () => {
   log.textContent = "";
-  window.setTimeout(() => {
+  setTimeout(() => {
     window.location.reload(true);
   }, 200);
 });
 
 window.addEventListener("load", (event) => {
-  log.textContent = log.textContent + "load\n";
+  log.textContent += "load\n";
 });
 
 document.addEventListener("readystatechange", (event) => {
-  log.textContent = log.textContent + `readystate: ${document.readyState}\n`;
+  log.textContent += `readystate: ${document.readyState}\n`;
 });
 
 document.addEventListener("DOMContentLoaded", (event) => {
-  log.textContent = log.textContent + `DOMContentLoaded\n`;
+  log.textContent += `DOMContentLoaded\n`;
 });
 ```
 
@@ -134,4 +140,9 @@ document.addEventListener("DOMContentLoaded", (event) => {
 
 ## 関連情報
 
-- 関連イベント: {{domxref("Window/DOMContentLoaded_event", "DOMContentLoaded")}}, {{domxref("Document/readystatechange_event", "readystatechange")}}, {{domxref("Window/beforeunload_event", "beforeunload")}}, {{domxref("Window/unload_event", "unload")}}
+- 文書 [readyState](/ja/docs/Web/API/Document/readyState) API
+- 関連イベント:
+  - {{domxref("Document/DOMContentLoaded_event", "DOMContentLoaded")}}
+  - {{domxref("Document/readystatechange_event", "readystatechange")}}
+  - {{domxref("Window/beforeunload_event", "beforeunload")}}
+  - {{domxref("Window/unload_event", "unload")}}