【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が不慣れなので自分のコードがおかしいのかとずっと疑ってしまいました・・・。気をつけたいですね。