JavaScriptでロード時にクリックイベントを発火させる方法

2024-02-10 04:21 JavaScript イベントハンドラ ロード時

方法1: HTMLのonload属性を使用する方法

<body onload="myFunction()">
  <h1>ページのコンテンツ</h1>
  <button id="myButton">クリック</button>

  <script>
    function myFunction() {
      document.getElementById("myButton").click();
    }
  </script>
</body>

この方法では、onload属性を使用してbody要素のロード時にmyFunction関数を呼び出します。myFunction関数内で、対象のボタンのclickメソッドを呼び出すことで、クリックイベントを発火させることができます。

方法2: JavaScriptのDOMContentLoadedイベントを使用する方法

<script>
  document.addEventListener("DOMContentLoaded", function() {
    document.getElementById("myButton").click();
  });
</script>

この方法では、DOMContentLoadedイベントを使用してページのDOMが完全に読み込まれた時点で指定した関数を実行します。上記のコードでは、DOMContentLoadedイベントが発生した時にmyFunction関数内で対象のボタンのclickメソッドを呼び出すことで、クリックイベントを発火させています。

これらの方法を使用すると、ページがロードされた瞬間にクリックイベントを発火させることができます。必要に応じて、任意の要素とイベントハンドラを指定して上記のコードをカスタマイズすることができます。