JavaScript: Przypisywanie i usuwanie zdarzeń

0:00W tej lekcji pokażę Ci trzy sposoby na to, jak

0:02możemy przypisywać zdarzenia

0:04do elementów z drzewa DOM. Zdarzenia mogą być

0:07różne,

0:07niemniej jednak w tej lekcji skupimy się na

0:09zdarzeniu click.

0:11I mam trzy przyciski, po kliknięciu

0:13na każdy z nich nic się nie dzieje

0:15ale właśnie cała magia JavaScript w przeglądarce polega

0:17na tym, że możemy w trakcie wczytywania się naszego

0:20skryptu zarejestrować zdarzenie.

0:22To znaczy, że jeżeli ktoś kliknie np. w ten przycisk

0:25to chcemy wykonać jakąś naszą konkretną funkcję.

0:27I teraz pokażę Ci pierwszy ze sposobów na przypisywanie zdarzeń.

0:31Mamy te trzy

0:32przyciski tutaj mają one takie identyfikatory i dwa z nich sobie pobrałem

0:36bo wykorzystamy tutaj.

0:37Pierwszy wykorzystamy w kodzie

0:38HTML. I mam jeszcze funkcję sayHello, która jest tutaj wstawiona bezpośrednio do

0:43tego pliku, a co za tym idzie ona jest globalna i to jest

0:45bardzo ważne, żeby można było się

0:47do niej odwołać gdziekolwiek.

0:49I ona nam robi taki alert

0:51hej. Czyli alert jest to wbudowana w

0:54przeglądarkach funkcja, która nam wyświetla takie oto okienko.

0:58I teraz pierwszym ze sposobów

1:00na przypisywanie zdarzeń

1:01jest przypisanie ich w sposób liniowy

1:04i robi się to w ten sposób, że napiszemy

1:06tutaj onclick,

1:08czyli jeżeli nazwa zdarzenia to

1:09jest click to dodajemy przedrostek

1:11on i mówimy onclick

1:13i tutaj podajemy w tym atrybucie kod JavaScript, który chcemy wykonać.

1:17Więc jeżeli

1:18mamy globalnie dostępną funkcję sayHello, to tutaj

1:21muszę wpisać coś

1:21takiego, czyli wywołanie

1:23tej funkcji. I zobacz co teraz się stanie

1:25kiedy kliknę w ten pierwszy przycisk, wywoła się nasza funkcja.

1:29I na moment się zatrzymamy bo chcę Ci powiedzieć,

1:31że to jest sposób, z którego raczej nie powinieneś korzystać, jeżeli nie musisz.

1:35Ja z niego korzystam niezwykle rzadko, w jakiś bardzo specyficznych przypadkach.

1:39Natomiast mogłeś się spotkać jeżeli wcześniej już

1:41widziałeś frameworki takie jak React czy np.

1:44View, że w podobny sposób przypisuje się tam zdarzenia.

1:47Niemniej jednak niech Cię to nie zmyli

1:49dlatego, że w przypadku

1:50takiego frameworka jak na przykład React tam w template

1:53czyli w szablonie przypisujemy co prawda w ten

1:55sposób zdarzenia, ale cały

1:57ten szablon jeszcze w

1:58skomplikowanym procesie jest kompilowany i tak naprawdę pod spodem

2:02można powiedzieć, że te zdarzenia są

2:04przypisywane w inny sposób za pomocą

2:06metody, którą za chwilę będę chciał Ci pokazać. A więc to, że w jakiś frameworkach

2:11w podobny sposób wprost do elementu przypisuje się zdarzenia,

2:14to nie oznacza, że one finalnie są właśnie tak przypisywane.

2:17Kolejnym ze sposobów,

2:19który będę chciał Ci pokazać jest to sposób za pomocą właściwości.

2:24Odwołamy się do tego buttona drugiego,

2:26pobrałem sobie go już tutaj i będzie to wyglądało następująco btn 2,

2:30mamy taką właściwość jak onclick.

2:32Jeżeli mielibyśmy inne

2:33zdarzenia np.

2:34DoubleClick to zapisali byśmy w ten sposób.

2:37Czyli też dodajemy przedrostek

2:38on, onclick i przypisujemy tutaj funkcję, którą chcemy żeby się wywołała.

2:45Więc tak to będzie wyglądać.

2:47I teraz jeżeli ktoś kliknie na ten przycisk

2:48to co ja będę chciał zrobić?

2:50Może wywołać sayHello. Czyli tę samą funkcję, która jest tutaj.

2:55Zobaczymy.

2:55Po kliknięciu na ten przycisk działa to dokładnie tak samo.

2:58Natomiast co ciekawe, wcale nie musimy

3:00tutaj wywoływać tej funkcji wewnątrz jakiejś nowej funkcji.

3:03Wystarczy, że ją tutaj przekażemy

3:04w ten sposób. Zobacz, to zadziała dokładnie tak samo klikam i jest ok.

3:09Natomiast nie wywołujemy tej funkcji, bo gdybyśmy zrobili tak, to by oznaczało,

3:14że

3:14pod onclick chcemy przypisać to co ta funkcja zwraca, bo jak ją wywołuje to tu

3:18jest podstawione to co ona zwraca. Ona nic nie

3:21zwraca, czyli zostało by tu podstawione undefined,

3:23no i to by nie działało. Dlatego tu trzeba przekazać

3:25referencję do funkcji

3:26albo ją wpisać tutaj ręcznie jakąś całą inną funkcję albo przekazać w ten sposób.

3:31Natomiast teraz Ci powiem, dlaczego

3:33taki sposób przypisywania zdarzeń nie

3:35jest idealny.

3:36Otóż dlatego, że możemy do takiego

3:38przycisku przypisać wyłącznie jedno zdarzenie kliknięcia.

3:41Gdybym ponownie powiedział btn2 onclick i przypisał tutaj funkcję

3:47już tym razem w sposób ręczny,

3:49ale to nie ma znaczenia

3:50i ona zamiast alert Hej będzie robiła alert

3:53Witaj, to co się stanie kiedy kliknę w ten przycisk?

3:56Zobacz, zobaczymy Witaj.

3:58Czyli można powiedzieć, że to kolejne przypisanie

4:00nadpisało to, które było wyżej.

4:02A więc taki sposób pozwala na przypisanie

4:04wyłącznie jednej funkcji obsługi takiego zdarzenia.

4:08A więc w zasadzie

4:10nie ma powodu, żeby korzystać z tego

4:11sposobu. I na koniec

4:13pokażę Ci

4:14ostatni sposób, który jest najczęściej wykorzystywany i jest on sposobem

4:17najlepszym.

4:19Zatem odwołamy się do button 3, który też mamy u

4:22góry pobrany

4:23i na każdym elemencie w drzewie DOM nie tylko na przyciskach,

4:26ale do dowolnego div, paragrafu, nagłówka,

4:28do wszystkiego możesz dodać sobie

4:30takie zdarzenie.

4:32Mamy dostępną metodę addEventListener.

4:34Ona wygląda w ten sposób

4:36i przyjmuje trzy parametry.

4:38Przy okazji zauważ, że ja właśnie specjalnie

4:40ten trzeci przycisk zrobiłem jako div a nie button

4:43żeby Ci pokazać, że w div też można kliknąć,

4:45nie ma najmniejszego problemu.

4:47I teraz tutaj podajemy

4:48nazwę zdarzenia jako string, czyli jak wyżej

4:51mieliśmy onclick

4:52tutaj podajemy samo click samą nazwę zdarzenia,

4:55później podajemy funkcję, którą chcemy wykonać

4:57kiedy ktoś kliknie w ten przycisk.

4:59Mogę znowu podstawić tutaj referencję do funkcji sayHello

5:02i też jej nie wywołuje, tylko ją po prostu podstawiam

5:05i ostatni parametr to jest taki parametr czy chcemy

5:08używać tzw. capturingu.

5:10O nim będzie w jednej z kolejnych lekcji.

5:12Tutaj 9 na 10 razy albo nawet częściej będziesz

5:15podstawiał false,

5:16ale można ten parametr również pominąć.

5:19Możemy zrobić tak i to będzie dokładnie

5:21tak samo, więc tylko wtedy, kiedy chcesz dać true będziemy to ustawiać.

5:24O tym jeszcze powiem później.

5:26Czyli teraz jeżeli kliknę na ten trzeci przycisk też się

5:28wykona ta sama funkcja sayHello,

5:30natomiast przewaga tego addEventListener jest taka,

5:33że możemy przypisać więcej zdarzeń,

5:36więcej funkcji obsługi do jednego elementu.

5:38Czyli mogę teraz powiedzieć button 3

5:41addEventListener i na kliknięcie

5:43przypisać jeszcze inną funkcję, np.

5:45sobie ją tutaj wpiszę, tym razem ręcznie,

5:48jest to funkcja anonimowa. Czyli ona zostanie

5:51utworzona i podstawiona w to miejsce i będę chciał zrobić alert

5:55Witaj

5:56i jak kliknę to powinna się wykonać najpierw ta funkcja, bo

5:59pierwsza została zarejestrowana

6:01a potem druga.

6:02Zobaczmy, zobaczyliśmy Hej i następnie Witaj.

6:06Czyli za pomocą addEventListener

6:08można dowolne zdarzenia przypisywać

6:10i można dzięki temu przypisać więcej niż jedną funkcję

6:14obsługi zdarzenia do jednego elementu. Na koniec

6:16pokażę Ci jeszcze jak usuwać takie

6:19zdarzenia. Czasami jest tak, że

6:20chcemy tylko raz wywołać jakąś funkcję i wewnątrz tej funkcji chcielibyśmy np.

6:25usunąć to zdarzenie. Ja to jednak zrobię

6:27po prostu tutaj poniżej, żeby pokazać Ci sposób.

6:29Czyli w przypadku takim jak mieliśmy tutaj przypisaliśmy na

6:33onclick jakąś funkcję, potem to nadpisaliśmy

6:35to żeby usunąć takie zdarzenie wystarczy zrobić

6:37btn 2 onclick i ustawić to na null.

6:42I zauważ, że teraz ten drugi przycisk jak

6:44klikamy nic się już nie dzieje,

6:46natomiast w przypadku addEventListener robimy to inaczej.

6:49btn3 mamy metodę removeEventListener

6:54i jej trzeba przekazać takie same

6:56parametry, czyli

6:57na kliknięcie chcę usunąć i podać funkcję sayHello, czyli której to

7:02dotyczy. Natomiast tutaj niesłychanie

7:04jest ważne to, żeby mieć odwołanie do tej funkcji.

7:06Czyli jak miałem funkcję tu i dodawałem ten Listener, to powiedziałem

7:10na kliknięcie wywołaj funkcję sayHello. A teraz chcę to odbindować

7:15czyli powiedzieć, że już od

7:17teraz nie chcę na kliknięcie wywoływać tej funkcji, to

7:19muszę ją tutaj przekazać. I zobacz.

7:22Jeżeli teraz

7:22kliknę, wywoła się tylko jedna funkcja Witaj.

7:25Natomiast my do tej funkcji nie mamy

7:27dostępu, więc gdybyśmy chcieli to odbindować, to jest

7:30też bardzo ważne,

7:31nie wystarczy zrobić tutaj removeEeventListener klik i podać taką samą funkcję.

7:36To nam nie zadziała z prostego powodu.

7:38Otóż ta funkcja tutaj może i wygląda tak

7:40samo jak ta, ale w JavaScript obiekty a funkcja jest traktowana jak obiekt

7:45są przekazywane przez

7:46referencje, więc to są dwie zupełnie różne funkcje.

7:49Czyli jeżeli podajesz funkcję anonimową, to nie masz możliwości

7:52usunięcia tej funkcji później.

7:55Więc jeżeli chcielibyśmy koniecznie

7:57móc wykonywać tę funkcję, ale na jakimś etapie ją odbindować, to musielibyśmy ją

8:01stąd wyciągnąć, wstawić ją tutaj, nadać jej jakąkolwiek nazwę, np.

8:07fn2 coś takiego i przypisać ją tutaj podstawiając przez

8:11referencję. Wtedy gdybyśmy ją chcieli odbindować, to możemy

8:15wskazać,

8:15którą funkcję chcemy usunąć, robiąc to w taki sposób.

8:18Niemniej jednak ja zostawię to tutaj w takim

8:20charakterze anonimowym.

8:22Zapamiętaj jednak.

8:25Tutaj musimy dodać remove.

8:27Zapamiętaj jednak, że jeżeli chcesz

8:29usunąć taki Listener, musisz mieć uchwyt do funkcji, którą podstawiasz

8:33jako drugi parametr.

8:34Po wykonaniu takiego kodu

8:36cały czas nam zostanie ta jedna funkcja, więc to może usunę.

8:41I jak widzisz funkcja witaj się wykonuje, ale na sayHello już nie.

8:44Czyli wykonała się po prostu ta funkcja.

8:47Podsumowując.

8:48Jeżeli koniecznie będziesz z

8:49jakiegoś powodu musiał i nie znajdziesz innego

8:51sposobu, albo będzie to najwygodniejsze

8:54przypisać zdarzenie np.

8:55kliknięcia w sposób liniowy, to zrób to w ten sposób.

8:58W innych przypadkach unikaj takiego sposobu.

9:00Unikaj też raczej tego sposobu

9:03a korzystaj z addEventListener i removeEventListener to jest to, co sprawdzi się

9:08praktycznie w każdym przypadku.