要素の配列から、mousedownされた要素を特定したい

Question

html要素の配列のうちのいずれかがmousedownされたときに、その要素に対して処理をしたいです。下記のコードでも一応動くのですが、2回　onmoudedown　を使っているので、遅いし動かない時もあります。どのようにしたら、もう少しキレイに書けるのでしょうか？

let Images = document.getElementById("frame").getElementsByTagName("img");//img要素の配列

window.document.onmousedown = function()
{
    for(let i=0; i<Images.length; i++)
    {
        Images[i].onmousedown = function()
        {
            targetElement = Images[i];
            console.log(targetElement);//クリックされた要素を出力
        }
    }
}

Comments

[yambejp]

frameというidがついた要素ってなんでしょう？

[takushikai]

div 要素です。説明不足ですみませんでした。

<div id="frame">
<img>
<img>
</div>

このような状況です。

Answer 1

<script>
document.addEventListener('mousedown',(e)=>{
  var t=e.target;
  if(t.nodeName=="IMG" && t.closest('#frame')){
    console.log(t);
  }
});
</script>
<div id="frame">
<img width="100" height="100" alt="test1">
<img width="100" height="100" alt="test2">
</div>
<img width="100" height="100" alt="test3">

Comments

[takushikai]

ありがとうございます！Event.targetというものがあるのですね。勉強になりました！

[yambejp]

addEventListenerは最内のHTML要素をつかみます
たとえばspanやdivのようにラップしている要素をつかみたい場合は
すこし工夫が必要です

[takushikai]

なるほど。その、「工夫」とはどうするのでしょうか？勉強のため教えていただけると嬉しいです。