【JavaScript】DOMツリー生成直後に発火するDOMContentLoaded

みなさんこんにちは！
筋肉カメレオンです。

今回は、Web制作時に助かる、ページ読み込み直後に処理を行いたい場合のイベント発火ポイントについてご紹介します。

DOMContentLoaded

ブラウザがサーバーからレスポンスデータを受け取り、DOM生成しブラウザに表示します。

まず、グローバルオブジェクトの「Window」オブジェクトを生成し、そのプロパティである「Document」オブジェクトが生成されます。

DocumentオブジェクトはDOMツリーを読み込んでいき、すべて解析が終わるとDOMContentLoadedイベントが発火されます。

つまりDOMContentLoadedイベントはDOMツリーの構築が完了した時点で発火します。

load

loadイベントはDOMツリーに加え、画像やすべてのスクリプトが読み込まれた時点で発火します。

そのため、画像やスクリプトに処理を追加する場合は、loadイベントを使用し、影響が無く、DOMツリー生成直後に発火したいのであれば、DOMContentLoadedイベントの使用が良いです。

sample code

document.addEventListener('DOMContentLoaded', function() {
  console.log("sample");
});

それぞれタイミングが異なるので、本来の望ましい挙動に近い記述で記載しましょう。

それでは。

ABOUT ME

たけぴー

2018年に体調を崩して激やせしてから筋トレにハマり、筋肉をつけて体重を10kg増加。 ホームトレーニーとして自宅でできる筋トレ方法や筋肉の知識、栄養学などを主にYouTubeにて学ぶ。 好きな筋肉は上腕二頭筋。得意な筋肉は大胸筋。 二児の父。 本業は大手Web制作会社のディレクター兼エンジニア。副業でいくつかのサイトを運営中。 詳しいプロフィールはこちら

\ アフィリエイト満足度1位 /

アフィリエイトを始めるなら、まず登録いただきたいASPが「A8.net」
豊富な広告と、使いやすい管理画面。
アフィリエイト満足度ランキングで9年連続1位を獲得！
成果報酬を即日振込申請できる、即時支払機能で報酬を即現金できます。