【JavaScript】複数の要素にイベントリスナーをつける方法

大前提として

Javascriptでは複数の要素に直接的に一気にイベントを登録することはできないです。

では、どのように記述すれば複数要素に対してイベントを設定できるのでしょうか?答えはforEach文を使い一つ一つの要素に対してイベントを設定すれば良いのです。

複数の要素にイベントリスナーをつける方法

<div>
  <button class="text">テキスト1</button>
  <button class="text">テキスト2</button>
</div>

<script>
window.addEventListener('DOMContentLoaded',function(){
  //まずイベントを設定する複数の要素を取得します
  const texts = document.getElementsByClassName('text'); 
  //forEachは配列に対してにしか使えないので取得した要素を配列の形にします
  textsArray = Array.from(texts);
  
  //forEac文を使い一つ一つの要素に対してイベントを設定します
  textsArray.forEach(function(text) {
     console.log(text);
  });
});
</script>
タイトルとURLをコピーしました