• 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
91 wizyt
pytanie zadane 16 maja 2018 w JavaScript, jQuery, AJAX przez kenjiro244 Dyskutant (8,490 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 (68,810 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,490 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 (68,810 p.)
Tak, to powinno być raczej lepsze rozwiązanie niż "x" addEventListener'ów.
komentarz 16 maja 2018 przez kenjiro244 Dyskutant (8,490 p.)
Ok dzięki

Podobne pytania

0 głosów
1 odpowiedź 73 wizyt
0 głosów
1 odpowiedź 196 wizyt
pytanie zadane 19 czerwca 2018 w JavaScript, jQuery, AJAX przez Wisien Nowicjusz (170 p.)
0 głosów
1 odpowiedź 107 wizyt
Porady nie od parady
Komentarze do pytań nie służą do odpowiadania, od tego jest wydzielona sekcja odpowiedzi. Funkcją komentarzy jest natomiast możliwość uzyskania dodatkowych informacji na temat samego posta.Komentarze

65,755 zapytań

112,393 odpowiedzi

237,319 komentarzy

46,700 pasjonatów

Przeglądających: 129
Pasjonatów: 1 Gości: 128

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.

...