コード書く中でつまずいたので自分用メモ兼、私と同じようなJavaScript初学者のために記事書きました！
#結論
querySelectorAllでaddEventListenerは使えませんでした！
#過程
画像をクリックしたら要素を取得できるようにしたいと思い、
下記のコードを試してみましたが、思うようにいかない・・・
【html】
<div id="card1" class="cards"><img src="./images/gen1.png" alt=""></div>
<div id="card2" class="cards"><img src="./images/gen2.png" alt=""></div>
<div id="card3" class="cards"><img src="./images/gen3.png" alt=""></div>
<div id="card4" class="cards"><img src="./images/gen4.png" alt=""></div>
【JS】※正しくないコードです。
document.querySelectorAll('.cards').addEventListener('click',function(){
console.log(this);
});
ググってみると下記サイトを発見し、そのサイトを元に原因究明してみました。
https://www.mitsue.co.jp/knowledge/blog/frontend/201805/24_0917.html
このサイトを1読して頂き、わからなければ当記事を参考にして頂ければ良いかと思います。(おこがましいですが・・)
##querySelectorAllで取得できる値はNodeListオブジェクトらしい・・
そして、NodeListオブジェクトはaddEventListenerを持たないらしい。
この情報を得て、
querySelectorAllの後にaddEventListenerをもってきても無駄だということが分かった。
##HTMLエレメントではaddEventListenerが使えるらしい・・・
下記サイトのメソッドの部分を読むと、どうやらそうらしい。
forEachを使えばうまくいくらしい・・・
ググるとforEachは繰り返し処理で、for文の代わりに使えばサクッと繰り返し処理をかけるとのこと。
記事冒頭に紹介したサイト(https://www.mitsue.co.jp/knowledge/blog/frontend/201805/24_0917.html)
ではforEachを使用していた。
ここで繰り返し処理使う?と少し疑問に思いましたが、下記サイトのメソッドの部分にあるNodeList.forEach()の説明書きを見ると少し腑に落ちました。
イメージとしては、forEachによってNodeListオブジェクトがhtmlエレメントに変換され、 引数cardsに渡される。先に述べたように、htmlエレメントではaddEventListenerが使用できるので値が取得できるようになる。
document.querySelectorAll('.cards').forEach(function(cards){
cards.addEventListener('click',function(){
console.log(cards);
});
});
下記の画像でも分かるようにコンソールにhtmlが表示されている。
##改めて結論
querySelectorAllでaddEventListenerは使えませんでした。
代わりにforEachを使用し、それに関数を指定してください。
その関数の中にaddEventListenerを含む関数を使ってください。
htmlエレメントはaddEventListenerを持っている(使える)ため、
取得したNodeListオブジェクトをhtmlエレメントに変換するためにforEachを使うのだという結論に達しました。
文章力が低く、伝わらない部分があるかもしれませんが、誰かの役に立てれば幸いです。