【JavaScript】イベントリスナを複数要素にまとめて登録する方法

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

let output = document.getElementById('bt_clicked');
//クラス名から取得
//let buttones = document.getElementsByClassName('bt');
//タグ名から取得
//let buttones = document.getElementsByTagName('button');

Array.prototype.forEach.call(buttones,function(element){
  element.addEventListener('click',function(event){
    output.textContent = 'you clicked ' + event.target.textContent + '.';
  },false);
});