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