JavaScript

【JavaScript】addEventListenerで複数要素にイベントを設定する方法

こちらの記事では、addEventListenerで複数要素にイベントを設定する方法について解説しています。
初めて複数要素に対してイベントを設定する人や普段jQueryを使っていてJavaScriptでイベント登録する方法が知りたい人はぜひこちらの記事を参考にしてください!

JavaScriptの学習におすすめ参考書
改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

参考書が苦手な人はUdemyの動画がおすすめ
ガチで学びたい人のためのWEB開発徹底実践(フロントエンド編)

動画情報
作成者CodeMafia
学習時間19.5時間
受講者数28,547人
レビュー (5,025件)
動画の詳細はこちら

間違いな書き方

addEventListenerで複数要素に対してイベントを設定するときに、以下のような書き方では動きません。
<div>
  <button class="btn">ボタン1</button>
  <button class="btn">ボタン2</button>
</div>

<script>
window.addEventListener('DOMContentLoaded',function(){
  const btn = document.getElementsByClassName('btn');
  
  btn.addEventListener('click',function(){
    console.log('ボタンがクリックされました!');
  });
});
// Uncaught TypeError: btn.addEventListener is not a function
</script>

上記のコードは、一つの要素に対してイベントを設定する時には問題のない書き方ですが「getElementsByName」「getElementsByClassName」などの複数形ではエラーが出力されます。

なぜ複数要素でエラーが表示されるかと言うと、複数要素を取得した場合そのデータは配列として保持されるからです。下記のコードは、「getElementById」と「getElementsByClassName」の要素を取得してデータを比較したものになります。
<div>
  <button id="btn">IDボタン</button>
  <button class="btn">Classボタン</button>
  <button class="btn">Classボタン</button>
</div>

<script>
console.log(document.getElementById('btn'));          // <button id="btn">IDボタン</button>
console.log(document.getElementsByClassName('btn'));  // HTMLCollection(2) [button.btn, button.btn]
</script>

正しい書き方

では、どのように記述すれば複数要素に対してイベントを設定できるのでしょうか?答えは簡単でfor文を使い一つ一つの要素に対してイベントを設定すれば良いのです。
<div>
  <button class="btn">ボタン1</button>
  <button class="btn">ボタン2</button>
</div>

<script>
window.addEventListener('DOMContentLoaded',function(){
  const btn = document.getElementsByClassName('btn'); // ①
  
  for(let i = 0; i < btn.length; i++){ // ②
    btn[i].addEventListener('click',function(){ // ②
      console.log(`${btn[i].textContent}がクリックされました!`); // ③
    });
  }
});
</script>
  1. まず初めにイベントを設定する複数の要素を取得します。今回の場合2つの要素に対してイベントを設定するため配列の0番目と1番目に要素が保持されている状態です。
  2. 続いて、for文を使い一つ一つの要素に対してイベントを設定します。btn[i].addEventListenerで1回目はiに0が入るため「ボタン1」にイベントが設定され、2回目はiに1が入るため「ボタン2」にイベントが設定されます。
  3. 最後にどのボタンが押されたか確認しやすいよう、console.log(`${btn[i].textContent}がクリックされました!`);で押されたボタン名を取得しコンソールに出力します。

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村