Cześć tworzę sobie galerię itd.
Zawsze gdy chciałem aby po kliknieciu w coś o podanym id się wydarzyło pisałem document.addEv.. if(e.target.id === 'nazwa'), dla wielu tych samych objektów, ale dowiedziałem się ze to nie jest do konca dobre i teraz tworzę coś co wymaga ode mnie albo użycia tego albo innego i zastanwiam się jak to inaczej zrobić aby nie tylko pierwsze zdjecie sie powiekszało ale i wszystkie tak jak był uzył e.target
var zoom = document.getElementById('zoom');
var body = document.querySelector('body');
var photoZoom = function() {
//Pobieram ścieżkę pliku
var thisImgSrc = this.getAttribute('src');
//Tworzę diva w którym umiesze to zdjęcie
var divPhoto = document.createElement('div');
divPhoto.classList.add('photoZoom');
//Dodaję do niego zdjęcie
divPhoto.innerHTML = "<img src='" + thisImgSrc + "'>";
body.appendChild(divPhoto);
var divPhoto = document.querySelector('.photoZoom');
var exit = function() {
body.removeChild(divPhoto);
};
divPhoto.addEventListener('click', exit);
};
zoom.addEventListener('click', photoZoom);
<div class="container">
<div class="cont-img">
<img src="img/1.jpeg" alt="1" id="zoom">
</div>
<div class="cont-img">
<img src="img/2.jpg" alt="2">
</div>
<div class="cont-img">
<img src="img/3.jpg" alt="3">
</div>
<div class="cont-img">
<img src="img/1.jpeg" alt="1">
</div>
<div class="cont-img">
<img src="img/2.jpg" alt="2">
</div>
<div class="cont-img">
<img src="img/3.jpg" alt="3">
</div>
</div>