From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../api/document/domcontentloaded_event/index.html | 190 +++++++++++++++++++++ 1 file changed, 190 insertions(+) create mode 100644 files/ja/web/api/document/domcontentloaded_event/index.html (limited to 'files/ja/web/api/document/domcontentloaded_event') diff --git a/files/ja/web/api/document/domcontentloaded_event/index.html b/files/ja/web/api/document/domcontentloaded_event/index.html new file mode 100644 index 0000000000..6b967b149a --- /dev/null +++ b/files/ja/web/api/document/domcontentloaded_event/index.html @@ -0,0 +1,190 @@ +--- +title: 'Document: DOMContentLoaded イベント' +slug: Web/API/Document/DOMContentLoaded_event +tags: + - API + - DOMContentLoaded + - Document + - Event + - Web +translation_of: Web/API/Document/DOMContentLoaded_event +--- +
{{APIRef}}
+ +

DOMContentLoaded イベントは、 HTML の初期文書が完全に読み込まれ解釈された時点で発生し、スタイルシート、画像、サブフレームの読み込みが完了するのを待ちません。

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル可 (ただし、キャンセル可能ではない単純イベントとして定義されている)
インターフェイス{{domxref("Event")}}
イベントハンドラープロパティなし
+ +

別なイベントである {{domxref("Window/load_event", "load")}} は、ページ全体が読み込まれたときにのみ使用します。 load を DOMContentLoaded がより適切である場面で使ってしまうことがよくある誤りです。

+ +

同期 JavaScript は DOM の解析をいったん中断します。ユーザーがページをリクエストした後でできるだけ早く DOM が解析されるようにしたい場合は、 JavaScript を非同期にして、スタイルシートの読み込みを最適化してください。ふつう通りに読み込むと、スタイルシートは HTML と並行で読み込まれ、中心となる HTML 文書の帯域を「盗む」ため、ふつう通りに読み込むと DOM 解析の速度を低下させます。

+ +

例

+ +

基本的な使用

+ +
document.addEventListener('DOMContentLoaded', (event) => {
+    console.log('DOM fully loaded and parsed');
+});
+
+ +

DOMContentLoaded の遅延

+ +
<script>
+  document.addEventListener('DOMContentLoaded', (event) => {
+    console.log('DOM fully loaded and parsed');
+  });
+
+for( let i = 0; i < 1000000000; i++)
+{} // This synchronous script is going to delay parsing of the DOM,
+   // so the DOMContentLoaded event is going to launch later.
+</script>
+
+ +

読み込みが完了しているかどうかのチェック

+ +

DOMContentLoaded はスクリプト実行の機会がある前に発生することがあるため、リスナーを追加する前にチェックするのが賢明です。

+ +
function doSomething() {
+  console.info('DOM loaded');
+}
+
+if (document.readyState === 'loading') {  // Loading hasn't finished yet
+  document.addEventListener('DOMContentLoaded', doSomething);
+} else {  // `DOMContentLoaded` has already fired
+  doSomething();
+}
+
+ +

ライブデモ

+ +

HTML

+ +
<div class="controls">
+  <button id="reload" type="button">Reload</button>
+</div>
+
+<div class="event-log">
+  <label>Event log:</label>
+  <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea>
+</div>
+ + + +

JS

+ +
const log = document.querySelector('.event-log-contents');
+const reload = document.querySelector('#reload');
+
+reload.addEventListener('click', () => {
+  log.textContent ='';
+  window.setTimeout(() => {
+      window.location.reload(true);
+  }, 200);
+});
+
+window.addEventListener('load', (event) => {
+    log.textContent = log.textContent + 'load\n';
+});
+
+document.addEventListener('readystatechange', (event) => {
+    log.textContent = log.textContent + `readystate: ${document.readyState}\n`;
+});
+
+document.addEventListener('DOMContentLoaded', (event) => {
+    log.textContent = log.textContent + `DOMContentLoaded\n`;
+});
+
+
+ +

結果

+ +

{{ EmbedLiveSample('Live_example', '100%', '160px') }}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', '#stop-parsing', 'DOMContentLoaded')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'syntax.html#the-end', 'DOMContentLoaded')}}{{Spec2('HTML5 W3C')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Document.DOMContentLoaded_event")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf