Jak ustawić eventListener tylko na rodzica.

Question

Cześć i czołem 

Kolejne pytanie, tym razem jak sprawić by eventListener skupiał się tylko na divie rodzicu, a nie na obiektach w nim zawartych.

var image = document.querySelectorAll('.item');
image = [...image];
image.forEach( fullResInit );

var Storage = {};


function fullResInit(e){
    e.addEventListener("click", e => init(e.currentTarget));
}
function init(element){
    createContainer();
    getSrc(element);
    createImage();
}
function getSrc(element){
    var fullSource = element.src;
    var source = fullSource.slice(19);
    Storage.source = source;
}


function createContainer(){
    var container = document.createElement('div');
    container.className = "imageContainer";
    document.body.appendChild(container);
    container.addEventListener("click", ()=>{
        container.remove();
    })
    var message = document.createElement("p");
    message.className = "close-message";
    message.innerHTML = "kliknij gdziekolwiek aby wyłączyć podgląd zdjęcia."
    container.appendChild(message);
    Storage.container = container;
}

function createImage(){
    var img = document.createElement('img');
    img.className = "fullResImage";
    img.src = Storage.source;
    Storage.container.appendChild(img);
}

Kliknięcie w zdjęcie, czyli obiekt img powoduje usunięcie kontenera, a ja chce, aby klikając obok zdjęcia kontener się usuwał.

I take małe pytanie na marginesie, korzystanie z czegoś takiego, to dobra praktyka?

var Storage = {};

    Storage.container = container;

    img.src = Storage.source;

 

Answer 1

Najłatwiej byłoby po prostu filtrować, czy event.target to ten sam element, do którego przypięto listener.

Co do Storage: to po prostu obiekt przechowujący stan aplikacji. Nie bardzo wiem, czemu miałoby się z tego nie korzystać?

Comments

TBH nie do końca rozumiem ani problemu, ani Twojej odpowiedzi. Mam wrażenie że odpowiedzią zarówno na pytanie jak i Twoją odpowiedź jest event.currentTarget, które... już jest w kodzie.

---

A to inna rzecz ;)

---

A może chodzi mu o parentNode czy parentElement?

---

 if(event.target == container){
        container.remove();
        }

dobra, użyłem tego event.target i działa jak należy.