Javascriptで複数の要素にイベントを登録する

jQueryに慣れすぎて、Javascriptで複数要素にイベントを登録しようとした時に少し迷ったので、同じような方向けにメモを残します。

今回やりたい事

例えば、hogeクラスを持つすべての要素にclickイベントを登録したい時、jQueryの場合は下記のように書くと動くと思います。
これをJavascriptでやりたい場合はどうすればいいでしょうか。

$(document).on(“click”,”.hoge”,function(){
　　//何かしらの処理
})

直感的にしてしまいやすい間違い

jQueryに慣れすぎてしまった民にとって直感的にしてしまいやすい間違いとして、下記のようなものがあると思います。
しかしこれは動きません。

document.querySelectorAll(“.hoge”).addEventListener(‘click’,function(){
　　//何かしらの処理
})

解決

Javascriptでは複数の要素に直接的に一気にイベントを登録することはできない。という事でforeachで回してその中で一つ一つにイベントを登録するようにます。

document.querySelectorAll(".hoge").forEach(function(){
    this.addEventListener('click',function(e){
       //何かしらの処理
    })
})

おまけ：クリックされた要素の取得

clickされた要素を取得しようとして『this』を指定したのですが、動きませんでした。
代わりに『e.srcElement』で取得できるようです。

document.querySelectorAll(".hoge").forEach(function(){
    this.addEventListener('click',function(e){
       this.style.color="red"            //NG
       e.srcElement.style.color="red"    //OK
    })
})

もしくはこうでもいいですね。

document.querySelectorAll(".hoge").forEach(function(elem){
    elem.addEventListener('click',function(e){
       elem.style.color="red"            //OK
    })
})

以上、Javascriptで複数の要素にイベントを登録する方法でした。
参考になれば幸いです。