こちらの記事では、addEventListenerで複数要素にイベントを設定する方法について解説しています。
初めて複数要素に対してイベントを設定する人や普段jQueryを使っていてJavaScriptでイベント登録する方法が知りたい人はぜひこちらの記事を参考にしてください！
JavaScriptの学習におすすめ書籍
1冊ですべて身につくJavaScript入門講座
メリット
- 誰でも分かるように嚙み砕いて説明してくれる
- アニメーションの知識が深く学べる
- 1つのWebサイトを作りながら学べる
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
全プログラマー必見！
変数名/関数名にもう悩まない！
変数名/関数名にもう悩まない！
リーダブルコード
メリット
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 （2023/07/23 02:48時点 | Amazon調べ）
ポチップ
目次
間違いな書き方
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}がクリックされました！`);で押されたボタン名を取得しコンソールに出力します。
