【Laravel】jsファイルでaddEventListener(click)などが動作しない時

自分の作っているページでクリックイベントが作動しなかったので、備忘録として。

以下の通りにしなくとも動作する場合があるかもしれません。環境によるみたいで、動作しなかったときの対応としてはDOMファイルが完全に読み込まれるまで待つというのが対策みたいですね。

Document: DOMContentLoaded イベント - Web API | MDN

DOMContentLoaded イベントは、HTML の文書が完全に読み込まれ構文解析され、すべての遅延スクリプト（ および ）がダウンロードされ、実行されたときに発生します。画像、サブフレーム、非同期スクリプトの読み込みの完了は待ちません。

developer.mozilla.org

// Script.js
{
  // DOMファイルの読み込みを待ってから処理を記述する
  document.addEventListener( 'DOMContentLoaded' , function( e ) {
    let button = document.getElementById('button');
    button.addEventListener('click', function( e ) {
      ...
    }
  }
}

要するにLaravelでjsファイルをpublicフォルダ直下に置いた場合はHTMLがしっかり読み込まれるまで待ってから処理をするように記述する必要があるということですかね？初めに書いた時clickイベントが動作しなくて、jsが不慣れなので自分のコードがおかしいのかとずっと疑ってしまいました・・・。気をつけたいですね。