javascriptのquerySelectorAllにクリックイベントを付与したいが、回数がおかしい

Question

バニラでのコーディングを勉強中です。
読み込んだ画像に対してaddEventListenerで「クリックしたらcanvasに描画」を記述したいと思っています。canvasにはfabricを使っていますが、今回の質問には関連しないと思います。

document.getElementById( "target" ).addEventListener( "change", function() {
	var fileList = this.files ;
	var num = 100;
	for( var i=0,l=fileList.length; l>i; i++ ) {
		var blobUrl = window.URL.createObjectURL( fileList[i] ) ;

        document.getElementById('Hikidasi').insertAdjacentHTML('beforeend','<img id="' + i + '" class="Htool" src="' + blobUrl + '" style="width:5vw">');
        document.querySelectorAll('.Htool').forEach(function(cards){
        cards.addEventListener('click',function(){
            console.log(cards.src);
            fabric.Image.fromURL(cards.src, function(oImg) {
            oImg.scaleToWidth(Can.width*0.1);
	        oImg.set('left', Can.width*0.3);
	        oImg.set('top', Can.height*0.3);
            Can.add(oImg);
        });
        });
        });
	}
    });

目的通り読み込んだ画像をクリックでcanvasへの描画はできましたが、forEachで回しているからだと思いますが、1個目の画像は1回、6個目の画像は6回分Can.add(oImg)されてしまいます。
querySelectorAllへのイベントなのでforEachを使っていますが、これが原因だと思いますが、解決策がわかりません。
すべて1回の描画に収めるのはどのようにすればよいでしょうか。

Answer 1

insertAdjacentHTML() で挿入した最後の <img> にだけ処理をすればよいのだと思います。

let hikidasi = document.getElementById('Hikidasi');
hikidasi.insertAdjacentHTML('beforeend',
    `<img id="${i}" class="Htool" src="${blobUrl}" style="width:5vw">`);
hikidasi.lastChild.addEventListener('click', function() {

または、ループを分ける。

for (var i = 0, l = fileList.length; l > i; i++) {
  var blobUrl = window.URL.createObjectURL(fileList[i]);
  document.getElementById('Hikidasi').insertAdjacentHTML(
      'beforeend', `<img id="${i}" class="Htool" src="${blobUrl}" style="width:5vw">`);
}
document.querySelectorAll('.Htool').forEach(function(cards) {
  cards.addEventListener('click', function() {
    ...
  });
});

Comments

[kihokutarou]

ループを分ける、でとてもすっきりしました。
単純なことでしたが本当にとても勉強になります。
ありがとうございました。