イベントリスナー[memo]

✅ 1. DOMの読み込み後（HTMLの構造がすべて読み込まれた後）

document.addEventListener("DOMContentLoaded", function () {
  // DOMの構築が完了したら実行
  myFunction();
});

function myFunction() {
  console.log("DOM読み込み完了！");
}

✅ 2. 画像やCSSなどを含むページ全体の読み込み後

window.addEventListener("load", function () {
  // ページ全体の読み込み完了後に実行
  myFunction();
});

function myFunction() {
  console.log("ページ全体の読み込み完了！");
}

✅ 3. 特定の外部スクリプトや要素の読み込み完了後（例：scriptタグのonload）

const script = document.createElement("script");
script.src = "https://example.com/library.js";

script.onload = function () {
  // スクリプトが読み込まれたら関数定義と実行
  myFunction();
};

document.head.appendChild(script);

function myFunction() {
  console.log("外部スクリプトの読み込み完了！");
}

用途に応じた選び方：
HTMLだけ読み込まれたタイミング → DOMContentLoaded

画像やCSSも含めて完全に読み込まれてから → load

外部JSの読み込み完了後に実行 → onload on <script>