class名やid名指定でaddEventListenerを処理させる方法

class名やid名の指定の仕方によっては、戻り値が変わってきます。（配列とかHTMLCollectionとかNodeListとか）今回はどんな形であっても、addEventListenerで処理させる方法をまとめます。

document.getElementByIdの場合

const btn =document.getElementById("btn");

  btn.addEventListener('mouseenter', function() {
    //処理内容
});

document.getElementByIdの場合、途中の処理を必要とせず、直接記述できます。

document.querySelectorAllの場合

const btn = document.querySelectorAll(".btn");

  btn.forEach(function(btn) {
  btn.addEventListener('mouseenter', function() {
    //処理内容
});

querySelectorAllの場合すべてのクラスに処理をかける必要があります。なので、forEach文で繰り返し処理を使って、配列の全てに処理をかけます。

document.getElementsByClassNameの場合

const btn =document.getElementsByClassName("btn");
const btns = Array.from(btn);

btns.forEach(function(btn) {
  btn.addEventListener("click", function() {
  // 処理内容
});

getElementsByClassNameの取得した場合戻り値はHTMLCollectionになります。これは配列ではないので、arry.fromメソッドで配列にします。そうすれば、あとは上記と同じような処理で動作します。

よくある指定方法をまとめました。
クラス指定する時はquerySelectorAllが楽なのかな。
まだaddEventListenerを満足に使いこなせていないです。なんかいいまとめサイトとかないかな。

参考記事