無法在陣列循環綁定事件到每個項目

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>