无法在阵列循环绑定事件到每个项目

Question

我想将事件添加到文档中的每一个形象，这是代码：

let images = document.getElementsByTagName("img") 
const self = this; 
for (var img of images) { 
    img.onclick = function(e) { 
     e.stopPropagation(); 
     if (!e.target.src) { 
     return; 
     } 
     self.source = e.target.src; 
     self.alt = e.target.alt; 
    } 
} 

我登录的所有图像，并发现只有最后图像有点击事件。我曾尝试将images转换为数组，并使用forEach方法，获得了相同的结果。这是怎么回事？ 顺便说一下，我在Vue的mounted钩子方法中这样做。

Answer 1

将事件附加到多个DOM元素的最佳方法是使用Event Delegation。您应该将event附加到父元素，并检查target元素是否为img or not。然后您可以访问图像的src和alt属性。

var images = document.querySelector('.images'); 
 
images.onclick = function(e) { 
 
    if(e.target.tagName === 'IMG') { 
 
    console.log(e.target.src +" : " + e.target.alt); 
 
    } 
 
}

<div class="images"> 
 
    <img alt="1" src="https://randomuser.me/api/portraits/men/83.jpg" /> 
 
    <img alt="2" src="https://randomuser.me/api/portraits/med/men/83.jpg" /> 
 
    <img alt="3" src="https://randomuser.me/api/portraits/thumb/men/83.jpg" /> 
 
</div>