Mmemo

PC作業に関する覚書やweb制作記録。
無料で使える便利ツールやwebアプリも制作。サイト上(ブラウザ上)で動作。

[JS] イベントリスナを複数要素にまとめて登録する方法

概要

同じクラスや同じタグ名の要素にまとめてイベントリスナを登録する方法。

実装

クリックしたボタンの番号を表示する。

コード

HTML

<p class="area-bt">
  <button class="bt-common">1</button>
  <button class="bt-common">2</button>
  <button class="bt-common">3</button>
  <button class="bt-common">4</button>
  <button class="bt-common">5</button>
</p>

JavaScript

const el_output = document.getElementById('output');
//class名から取得
const els_bt_common = document.getElementsByClassName('bt-common');
//タグ名から取得
//const els_button_common = document.getElementsByTagName('button');

[...els_bt_common].forEach((el_bt,i)=>{
  el_bt.addEventListener('click',(e)=>{
    el_output.textContent = 'you clicked' + el_bt.textContent + '.';
    //別案1
    // el_output.textContent = 'you clicked' + e.target.textContent + '.';
    //別案2
    // el_output.textContent = 'you clicked' + (i+1) + '.';
  });
});