Window: DOMContentLoaded イベント

DOMContentLoaded イベントは、最初の HTML 文書の読み込みと解析が完了したとき、スタイルシート、画像、サブフレームの読み込みが完了するのを待たずに発生します。

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

このイベントの本来の対象は、読み込まれた Document です。このイベントを Window からキャプチャやバブリングの過程で待ち受けすることができます。このイベントについての全般的な詳細は、 Document: DOMContentLoaded イベントのページをご覧ください。

別なイベントである load は、ページ全体が読み込まれたことを検出するためにのみ使用してください。 load を、 DOMContentLoaded がより適切である場面に使用する間違いがよくあります。

基本的な使用

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

仕様書

仕様書 状態
HTML Living Standard 現行の標準

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
DOMContentLoaded eventChrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 1IE 完全対応 9Opera 完全対応 9Safari 完全対応 3.1WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応

関連情報