見出し画像

複数エレメントにイベントリスナー取り付け

var c=document.getElementsByClassName('button')
for(var i=0,l=c.length;i<l;i++){
   (function(e){
        e.addEventListener('touchstart',function(_e){
            console.log(e.className, e.id)
        }
    })(c.item(i))
}

複数のエレメントをクラス名で取得
取得したものはHTMLコレクション(疑似配列)として帰ってくる
コレクションはitem()でアクセスできる

問題はforの変数iをそのまま使うと全てのイベントリスナーが変数の最後の指定になってしまうので、変数iを固定化しなければならない
即時実行関数の引数として各エレメントを渡すことで変数iを固定化することが可能

この記事が気に入ったらサポートをしてみませんか?