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

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

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

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