こちらの記事では、addEventListenerで複数要素にイベントを設定する方法について解説しています。
初めて複数要素に対してイベントを設定する人や普段jQueryを使っていてJavaScriptでイベント登録する方法が知りたい人はぜひこちらの記事を参考にしてください！
JavaScriptの学習におすすめ参考書
改訂3版JavaScript本格入門 ～モダンスタイルによる基礎から現場での応用まで
| 出版社 | 技術評論社 |
|---|---|
| 著者 | 山田 祥寛 |
| 発売日 | 2023/2/13 |
| ページ数 | 624ページ |
| レビュー (Amazon) | (4件) |
先輩くん
10万部突破したJavaScriptの本が大幅増補改訂し7年ぶりに発売されたよ！
後輩ちゃん
最新の基本文法から、開発に欠かせない応用トピックまで学ぶことが出来るよ！
綺麗なコードが書けるようになる！
リーダブルコード-より良いコードを書くためのシンプルで実践的なテクニック
| 出版社 | オライリージャパン |
|---|---|
| 著者 | Dustin Boswell / Trevor Foucher |
| 発売日 | 2012/6/23 |
| ページ数 | 260ページ |
| レビュー (Amazon) | (620件) |
先輩くん
より良いコードを書きたい人におすすめの本だよ！
後輩ちゃん
10以上前の書籍ですが、内容は今でも役に立つものばかりです！
間違いな書き方
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>- まず初めにイベントを設定する複数の要素を取得します。今回の場合2つの要素に対してイベントを設定するため配列の0番目と1番目に要素が保持されている状態です。
- 続いて、for文を使い一つ一つの要素に対してイベントを設定します。btn[i].addEventListenerで1回目はiに0が入るため「ボタン1」にイベントが設定され、2回目はiに1が入るため「ボタン2」にイベントが設定されます。
- 最後にどのボタンが押されたか確認しやすいよう、console.log(`${btn[i].textContent}がクリックされました！`);で押されたボタン名を取得しコンソールに出力します。
1冊ですべて身につくHTML & CSSとWebデザイン入門講座 
