Mmemo

PC作業に関するメモ

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

概要

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

実装

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

コード

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);
});