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

Web制作

• JavaScript

概要

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

実装

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

1 2 3 4 5

コード

HTML

<p id="bt_area">
  <button class="bt">1</button>
  <button class="bt">2</button>
  <button class="bt">3</button>
  <button class="bt">4</button>
  <button class="bt">5</button>
</p>
<p><span id="bt_clicked"></span></p>

JavaScript

const output = document.getElementById('bt_clicked');
//class名から取得
const bts = document.getElementsByClassName('bt');
//タグ名から取得
//const bts = document.getElementsByTagName('button');

[...bts].forEach(bt=>{
  bt.addEventListener('click',(e)=>{
    output.textContent = 'you clicked' + bt.textContent + '.';
    //どちらでも可
    // output.textContent = 'you clicked' + e.target.textContent + '.';
  });
});