• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

[JS] addEventListener dla obiektów

VPS Starter Arubacloud
0 głosów
384 wizyt
pytanie zadane 16 maja 2018 w JavaScript przez kenjiro244 Dyskutant (8,600 p.)

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

1 odpowiedź

0 głosów
odpowiedź 16 maja 2018 przez Chess Szeryf (76,710 p.)
wybrane 16 maja 2018 przez kenjiro244
 
Najlepsza

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

komentarz 16 maja 2018 przez kenjiro244 Dyskutant (8,600 p.)

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

if(e.target.tagName === 'DIV' && e.target.classList.contains('labelEvent'))
komentarz 16 maja 2018 przez Chess Szeryf (76,710 p.)
Tak, to powinno być raczej lepsze rozwiązanie niż "x" addEventListener'ów.
komentarz 16 maja 2018 przez kenjiro244 Dyskutant (8,600 p.)
Ok dzięki

Podobne pytania

0 głosów
1 odpowiedź 364 wizyt
0 głosów
1 odpowiedź 642 wizyt
pytanie zadane 19 czerwca 2018 w JavaScript przez Wisien Nowicjusz (200 p.)
0 głosów
1 odpowiedź 218 wizyt
pytanie zadane 20 marca 2018 w JavaScript przez OdsetekGlupoty Pasjonat (15,360 p.)

92,452 zapytań

141,262 odpowiedzi

319,077 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...