JavaScript: Obiekt event i target

0:00Teraz pokażę Ci, jak możemy po

0:02wywołaniu jakiegoś eventu uzyskać informacje na temat tego zdarzenia.

0:06Więc mamy znowu trzy przyciski.

0:08Zaczniemy od przypisania zdarzenia

0:09kliknięcia do drugiego przycisku. Więc powiem btn2,

0:14następnie addEventListener,

0:16przypiszemy zdarzenie kliknięcia i tutaj podam funkcję.

0:20Czyli już wiemy na tym etapie, że ta

0:21funkcja się wykona kiedy klikniemy w przycisk drugi.

0:24Ale co ciekawe można powiedzieć, że ten obiektowy model dokumentu podstawi nam

0:28tutaj do tej funkcji automatycznie obiekt Event.

0:32Skoro my tę funkcję tworzymy, to parametry tej funkcji możemy nazwać jak chcemy,

0:36czyli możemy to nazwać e, możemy nazwać event,

0:38to jest tylko parametr, który Ty tworzysz.

0:40Niemniej jednak właśnie pod ten pierwszy

0:42parametr zostanie podstawiony obiekt z eventem.

0:45Ja sobie przyjąłem, że zazwyczaj tworzę to jako e.

0:48Niektórzy piszą event po prostu albo evt, to zależy od Ciebie.

0:52Nazwij to jak chcesz,

0:54natomiast pod ten parametr zostanie podstawiony obiekt.

0:57No i zróbmy sobie console.log tego

0:58obiektu, żeby zobaczyć co nam tam przeglądarka podstawi.

1:01Czyli klikam w ten przycisk, bo do tego to

1:03przypisaliśmy i otrzymaliśmy coś takiego jak MouseEvent.

1:07Co ciekawe te eventy mogą się od siebie różnić dlatego, że jak będziemy mieli

1:10zdarzenia dotyczące klawiatury to tu może być KeyboardEvent itd.

1:15Ale jest to jakiś obiekt,

1:17czyli normalnie po kropce

1:18tutaj po e kropka można się odwołać do jego

1:20różnych metod i właściwości i zauważ, że on zawiera sporo tutaj różnych

1:25właściwości, a także będą tutaj dostępne jakieś metody.

1:29Czyli co my możemy tak naprawdę z tego eventu odczytać, no np.

1:31w którym miejscu był kursor myszy, kiedy kliknęliśmy na ten element itd.

1:37To co będziemy bardzo często odczytywać z takich eventów to jest target, czyli można

1:41powiedzieć, że element, na którym wywołał się ten event.

1:45I teraz tutaj jest jedna bardzo ciekawa rzecz, o której chcę wspomnieć.

1:48Bo co chciałbym zrobić, jeżeli klikniemy na tym przycisk

1:51wyobraźmy sobie, że po kliknięciu na ten przycisk z tej funkcji wysyłamy jakieś

1:54zapytanie do serwera i chcemy ten przycisk zablokować.

1:57Więc teoretycznie najprościej byłoby

1:59powiedzieć skoro mamy w zmiennej już ten przycisk to btn2 i np.

2:04set.Attribute disabled ustawimy na true. Ale

2:08jeżeli chcemy się w bardziej dynamiczny sposób do tego odwołać, bo

2:12powiedzmy ta funkcja będzie zdefiniowana w jakimś innym miejscu, potem będzie

2:16zaimportowana i ta funkcja ona jakby w miejscu, w którym jest tworzona nie będzie

2:20miała dostępu do takiej zmiennej to możemy to zrobić dynamiczniej i wewnątrz takiej

2:24funkcji odwołać się do czegoś takiego jak event target.

2:28Czyli można powiedzieć, że tym obiektem jak mamy tutaj ten event, to target będzie

2:33nam kierował na element, na którym się wywołało to zdarzenie.

2:36Czyli event.target daje nam dokładnie

2:38takie samo odwołanie do tego przycisku jak pobranie go poprzez querySelector.

2:42To jest dokładnie to samo.

2:44OK, zobaczmy czy to zadziała.

2:46Klikam na drugi przycisk

2:47i jak widzisz został do niego dodany atrybut disabled.

2:51Tutaj natomiast jest pewna pułapka, o której powiem teraz.

2:54Zobacz mamy przycisk btn3.

2:56Wygląda on niemal identycznie, ale w środku ma jeszcze element span i ten span

3:01może być tutaj z powodów choćby dekoracyjnych.

3:04Jeżeli teraz do tego trzeciego elementu,

3:06do tego trzeciego przycisku przypiszemy dokładnie to samo, czyli po kliknięciu w ten

3:10przycisk chcemy dodać do tego e.target atrybut disabled.

3:15Zobaczmy co się stanie.

3:16Klikam w trzeci przycisk

3:18i nie został tutaj dodany ten atrybut.

3:20Dlaczego?

3:21Zobaczmy, bo ten atrybut został dodany do span.

3:25Czyli to powinno Ci mówić o jednej bardzo ważnej rzeczy.

3:28Chociaż przypisaliśmy zdarzenie kliknięcia do

3:30przycisku, to pod event.target otrzymaliśmy span,

3:34bo tak naprawdę kliknęliśmy na ten span, który jest wewnątrz.

3:38Co zatem zrobić w sytuacji, w której nie chcielibyśmy otrzymać pod event.target

3:42tego span, ale dokładnie element, na którym zarejestrowaliśmy zdarzenie

3:47żeby mieć pewność, że event.target odwołuje się właśnie do tego przycisku.

3:51Otóż mamy inną właściwość, która nazywa się currentTarget

3:54i ja zawsze praktycznie z niej korzystam i pod nią zostanie zawsze podstawiony

3:59element, na którym przypisałeś addEventListener.

4:02Czyli tutaj nieważne, że wewnątrz przycisku kliknęliśmy w coś innego,

4:06tutaj zawsze otrzymamy odwołanie do tego przycisku.

4:09Więc jeżeli teraz sobie kliknę tutaj, to już jak widzimy wszystko działa i disabled

4:13został dodany do tego konkretnego elementu.

4:16Kiedy zatem korzystać z event.target a kiedy z currentTarget?

4:21Wyobraź sobie taką sytuację, że na stronę doładowujemy dynamicznie jakiś kod HTML.

4:26Nie będziemy tego teraz robić, ale chodzi

4:28mi o to, że mamy tutaj taki przycisk, do którego nie przypisaliśmy żadnego zdarzenia.

4:33Czyli można powiedzieć, że po kliknięciu w ten przycisk nic się kompletnie nie dzieje.

4:37I co zrobić, jeżeli byśmy mieli więcej

4:38takich elementów i nie chcemy do każdego z nich przypisywać takiego zdarzenia?

4:43Oczywiście najlepiej jest to przypisać do każdego elementu np. w pętli, ale czasami jest

4:48tak, że ajaxem wczytujemy więcej jakiś elementów, jakiegoś kodu HTML, a

4:53mimo tego chcemy, żeby zarejestrowane wcześniej zdarzenia działały.

4:57Czyli możemy zarejestrować zdarzenie

4:58kliknięcia na ten przycisk tylko jeśli ten przycisk istnieje.

5:01Ale możemy zrobić coś takiego, że

5:03zarejestrujemy zdarzenie kliknięcia w dowolnym miejscu na body

5:07i wtedy sprawdzimy czy kliknięty został przycisk czy nie.

5:10Pokażę Ci jak to zrobić.

5:11Odwołamy się do document.body.addEventListener i powiem, że po

5:15kliknięciu na body, czyli w dowolnym miejscu i to jest tzw.

5:20event delegation, to co robimy teraz.

5:22Wywołaj mi taką funkcję.

5:23Ale, że ja nie chcę wywoływać tej funkcji czy kodu, który tam zawrę

5:27jeżeli gdziekolwiek kliknę, to możemy tutaj zrobić takiego if.

5:31Jeżeli event.target

5:34albo może go wyświetlmy, żebym Ci pokazał dokładnie o co chodzi.

5:37event.target zobacz.

5:40Czyli po kliknięciu w dowolne miejsce na body

5:43mam event.target np. container.

5:44Wtedy nic nie chcę robić, ale jeśli event.target

5:46to będzie przycisk to wtedy chcę wywołać właśnie mój kod.

5:51Czyli możemy sobie tutaj zrobić if i powiedzieć jeżeli event.target np.

5:55ma klasę, czyli classList.contains,

5:58jeżeli on ma klasę button to tylko wtedy wywołaj mój kod.

6:01Czyli za każdym razem jak klikniemy

6:03gdziekolwiek w body, w dowolny element, to ta funkcja się wykona, ale w środku możemy

6:08ograniczyć jej kod do takiego if i wtedy wiemy, że jeżeli kliknęliśmy w przycisk to

6:14tylko wtedy wykonamy kod, który tutaj podamy.

6:17A więc możemy zrobić console.log Kliknąłeś przycisk.

6:24Zobaczmy, teraz jak odświeżę

6:26klikam sobie w body,

6:27ta funkcja się wywołuje, ale warunek jest fałszywy.

6:30Jeżeli kliknę w przycisk mamy kliknąłeś przycisk. Mimo tego, że do tego konkretnego

6:34elementu nie przypisaliśmy bezpośrednio zdarzenia kliknięcia.

6:39Tak jak wspomniałem, to będzie przydatne raczej w sytuacji, jeżeli wcześniej chcesz

6:42zarejestrować takie zdarzenie, a potem będziesz np.

6:45dynamicznie z serwera doczytywał jakiś kod HTML i sporo takich elementów zostanie

6:50utworzonych, to po kliknięciu na te elementy zadziała to dokładnie tak samo,

6:54bo zdarzenie zostało przypisane nie do tych elementów, ale do body i dopiero

6:58wtedy jest sprawdzane czy targetem jest taki przycisk.

7:01Na sam koniec pokażę Ci jeszcze jedną bardzo ważną rzecz, ale w tym celu

7:04utworzymy sobie jeszcze jeden przycisk, więc może zróbmy sobie tutaj button 4 i

7:10powiedzmy, że tutaj będzie is-warning, żeby on wyglądał troszkę inaczej.

7:17OK i pobierzemy sobie go również tutaj.

7:23Bo jeżeli chodzi o przekazywaną funkcję

7:25tutaj ja utworzyłem funkcję w taki sposób, ale można utworzyć również funkcję

7:29strzałkową, o czym chciałbym Ci powiedzieć.

7:31Czyli zrobiłem btn4.addEventListener i po kliknięciu w ten przycisk najpierw

7:35zrobię standardową funkcję i tutaj odwołamy się do eventu.

7:40I chcę Ci pokazać, że wewnątrz takiej

7:41funkcji po this masz dokładnie to samo co pod event.target,

7:45ale nie do końca polecam korzystanie z tego this.

7:48Zróbmy sobie console.log czy this to jest to samo co event.target?

7:53Kliknijmy w ten czwarty przycisk i zobaczmy.

7:56I jeszcze może dodamy sobie tutaj coś takiego.

8:00OK.

8:02Klikam i widzimy true.

8:04To oznacza, że możesz teoretycznie zamiennie korzystać z this i z event.target

8:08i często można to spotkać w różnych tutorialach, że zrobimy np.

8:11this.setAttribute disabled.

8:14Ale to po pierwsze będzie event.target, a nie event.currentTarget, a po drugie this

8:19będzie działać tylko w tak stworzonej funkcji.

8:22Gdybyś sobie tutaj podstawił funkcję strzałkową taką z ES6 zrobioną w ten sposób, to w

8:27takiej funkcji this nie będzie już mogło być ustawione właśnie przez ten kod, który się

8:32tutaj wykonuje i będzie kierować na coś zupełnie innego.

8:35Zobaczmy. Kliknij mnie.

8:37Teraz mamy false. I mógłbyś się zdziwić, że Ty wewnątrz takiej funkcji robisz sobie this

8:41myśląc, że to jest to samo co event.target i np. przypisujesz taki atrybut disabled.

8:46Natomiast tak nie jest.

8:47Z tego powodu nie polecam skorzystania z

8:50this w ogóle wewnątrz takiej funkcji obsługi zdarzenia,

8:53natomiast jeżeli już byś to robił to pamiętaj, że jeżeli podstawiasz funkcję

8:57strzałkową to wtedy to this nie będzie kierowało na to samo co event.target.