Tal como ya te han indicado correctamente en los comentarios, una posible solución pasa por utilizar la delegación de eventos, asignando ese evento a un elemento padre, lo más cercano posible, que los contenga a todos. Eso sería lo más óptimo. O bien asignarlos al elemento body o document, que no sería tan óptimo pero también funcionaría.
Usando el body, podría ser así:
document.body.addEventListener('click', function (event) {
if(event.target.tagName == "IMG") {
openFullImg(event.target.src)
}
});
donde event.target representa el elemento que ha recibido el evento y
donde event.target.tagName nos devuelve el tag del elemento que ha recibido el evento, y mediante el condicional nos aseguramos que sea IMG para entrar en él y ejecutar la función openFullImg().
Snippet de muestra:
document.body.addEventListener('click', function(event) {
if (event.target.tagName == "IMG") {
openFullImg(event.target.src)
}
});
function openFullImg(src) {
console.log(src)
}
<img src="imagen1.jpg" alt="imagen1">
<img src="imagen2.jpg" alt="imagen2">
Usando un elemento que contenga las imágenes referenciado por su id podría ser así:
<div id="imagenes">
<img src="imagen1" alt="imagen1">
<img src="imagen2" alt="imagen2">
</div>
<script>
contenedor = document.getElementById("imagenes")
contenedor.addEventListener('click', function(event) {
if (event.target.tagName == "IMG") {
openFullImg(event.target.src)
}
});
</script>
Snippet de muestra:
contenedor = document.getElementById("imagenes")
contenedor.addEventListener('click', function(event) {
if (event.target.tagName == "IMG") {
openFullImg(event.target.src)
}
});
function openFullImg(src) {
console.log(src)
}
<div id="imagenes">
<img src="imagen1" alt="imagen1">
<img src="imagen2" alt="imagen2">
</div>