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

Web制作

• JavaScript

概要

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

実装

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

1 2 3 4 5

コード

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) + '.';
  });
});