Photo Zoom, co zamiast e.target

Question

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>

 

Answer 1

Może zamiast dodawać id, użyj class'y np. "call-to-zoom".

Wtedy zamiast:

var zoom = document.getElementById('zoom');

Użyj

var zoom = document.querySelectorAll('.call-to-zoom');

Aby następnie użyć pętli for, do umocowania EventListener'a do każdego wybranego obiektu. Następnie przesyłasz event do funkcji, używajac .target odnosisz się do obiektu na którym został wykonany event. I dalej to już sobie pracujesz na tym obiekcie. W Twoim wypadku pobranie src + dodanie classy. 

 

Comments

Po co podpinać wiele event listenerów, skoro można podpiąć jeden do wspólnego przodka wszystkich tych elementów i tylko sprawdzać w co kliknięto? Tak jak napisał @niezalogowany - event delegation.

---

Oczywiście że można, ale bind ma lepszy performance w stosunku do delegation.

---

Jaki bind?

---

Bind tzn powiązenie elementu z listenerem.

---

Jaka jest różnica w szybkości pomiędzy bezpośrednim podłączeniem listenera, a delegacją zdarzenia? Jakiś test, link do artykułu?

Answer 2

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

Wszystko rozchodzi się o to, aby podpiąć event raz, a później tylko sprawdzać w co kliknął użytkownik. Poczytaj o event delegation