JavaScriptで同一クラスの複数要素にクリックイベントを付与する

サンプルコード

const target = document.querySelectorAll('.js-click');
for (let i = 0; i < target.length; i++) {
    target[i].addEventListener('click', function(){
        alert('hoge');
    });
};

概要

querySelectorAllで複数ある.js-clickというクラスをすべて同一ネームで定義する。 次にfor文を用い、存在する.js-clickをすべて取得する。 無事すべての該当要素を取得できたことにより、該当する要素へのイベントを実行することができる。

個人的にはまった泥沼

間違ったコード

const target = document.querySelectorAll('.js-click');
    target.addEventListener('click', function(){
        alert('hoge')
    });

これだとUncaught TypeError: target.addEventListener is not a functionというエラーと出会うことになる。 これはイベントに該当する要素ひとつひとつを取得できていないがために遭遇するエラー。 実際にコンソールで確認するとNodeList（Nodeの集合体）と定義されている。 このエラーを避けるためにfor文を使用し１つずつ取得する必要がある。