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

[JS] addEventListener dla obiektów

0 głosów
80 wizyt
pytanie zadane 16 maja 2018 w JavaScript, jQuery, AJAX przez kenjiro244 Mądrala (7,380 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 Maniak (65,330 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 Mądrala (7,380 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 Maniak (65,330 p.)
Tak, to powinno być raczej lepsze rozwiązanie niż "x" addEventListener'ów.
komentarz 16 maja 2018 przez kenjiro244 Mądrala (7,380 p.)
Ok dzięki

Podobne pytania

0 głosów
1 odpowiedź 64 wizyt
0 głosów
1 odpowiedź 175 wizyt
pytanie zadane 19 czerwca 2018 w JavaScript, jQuery, AJAX przez Wisien Nowicjusz (170 p.)
0 głosów
1 odpowiedź 104 wizyt
Porady nie od parady
Nie wiesz jak poprawnie zredagować pytanie lub pragniesz poznać którąś z funkcji forum? Odwiedź podstronę Pomoc (FAQ) dostępną w menu pod ikoną apteczki.FAQ

63,313 zapytań

109,570 odpowiedzi

228,885 komentarzy

43,981 pasjonatów

Przeglądających: 280
Pasjonatów: 14 Gości: 266

Motyw:

Akcja Pajacyk

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

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...