web関連

【javascript】複数の要素にイベントを仕込みたい

同じclassを持つ要素に同じクリックイベントを仕込みたかったんだけどjavascriptのやり方がわからなかったので備忘録

javascriptで複数の要素にイベントを仕込む方法

querySelectorAll()で同名の要素を取得し、
forEach()でループ処理し個々にイベントを指定していきます

<div class="btn">ボタン1</div>
  <div class="btn">ボタン2</div>
  
  <script>
  var elements = document.querySelectorAll(".btn");// NodeListとして取得
  elements.forEach(elm => {
    elm.addEventListener('click', function(){
      alert(this.textContent + "が押されました!");
    });
  });
  </script>

querySelectorAllで取得できる要素はNodeListだから何も考えずループ文で取得できるけど
getElementsByClassNameで取得するとHTMLCollectionという配列もどきで取得することになり、Array.from()などで配列にしてからじゃないとループ処理で中身を取得できないので注意

jQueryだったら何も考えずに$('.btn').on("click", function() {…});でいいんだけどね

Leave a Comment

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。