[JS] addEventListener dla obiektów

Question

Witam jestem w trakcje tworzenia własnego kalendarza najlepszy przykład to kalendarz od googla po przełączaniu na widok miesiąca. Więc każde wydarzenie jest to obiekt który jest przechowywany w tablicy this.eventsArray.

Problem polega na tym że chciałbym do każdego wydarzenia dodać możliwość kliknięcia w niego i wyświetlania większej ilości informacji. 

I teraz czy stworzenie powiedzmy 200 obiektów oraz nadanie każdemu addEventListener nie jest zbyt obciążające. I czy lepiej jest stworzyć jeden addEventListener który będzie sprawdzał czy kliknięto w dany div i uruchamiał daną funkcje obiektu. I czy takie coś jest poprawne i ma rację bytu? :D

this.divCalendarTable.addEventListener('click', function (e)
        {
            //Tutaj jest warunek sprawdzający czy kliknięte zostało wydarzenie czy inna część kalendarza
            let pos = this.eventsArray.map(function(e) { return e.labelEvent; }).indexOf(e.target);

            this.eventsArray[pos].showMore();



        }.bind(this));

Jeszcze wyjaśnienie zmiennych:

this.divCalendarTable - no kalendarz który jest tabelą;

this.eventsArray - tablica obiektów 

labelEvent - właściwość obiektu czy div wyświetlany w kalendarzu

.showMore(); funkcja obiektu wyświetlająca więcej :D

Answer 1

Zastosuj do tego Event Delegation + target.

Link1, link2, link3.

PSEUDO-CODE

function func(){
    if clicked to child parent .div_class, this run something
}

document.addEventListener('click',func,false);

Możesz podpatrzyć te rozwiązanie (ostatni post):

http://www.forumweb.pl/poczatkujacy-webmaster/przycisk-rozwijajacy-dalsza-czesc-tekstu/533995#533995

Comments

No czyli w sumie to co wstawiłem jako kod + do tego warunek:

if(e.target.tagName === 'DIV' && e.target.classList.contains('labelEvent'))

---

Tak, to powinno być raczej lepsze rozwiązanie niż "x" addEventListener'ów.

---

Ok dzięki