JavaScript: Zapobieganie domyślnej akcji przeglądarki

0:00W tej lekcji pokażę Ci, jak możemy z

0:02poziomu kodu JavaScript zapobiegać domyślnej akcji przeglądarki.

0:06Teraz co może być domyślną akcją przeglądarki?

0:08Jak mamy taki formularz jak tutaj

0:10to po kliknięciu Wyślij

0:11domyślną akcją przeglądarki jest wysłanie go do serwera.

0:14Zauważ, że tutaj został taki ciąg dodany, czyli się wysłał.

0:17Jak mamy link to domyślną akcją

0:19przeglądarki będzie po prostu przejście pod ten link.

0:22W tym przypadku mam tylko tutaj hash, więc jak kliknę to ten hash jest tutaj

0:26dodawany. Ale po prostu została wykonana domyślna akcja przeglądarki.

0:30Natomiast my chcemy czasami przechwycić

0:31jakieś zdarzenie i powiedzieć, że w momencie jak ten formularz będzie wysyłany

0:36to chcemy żeby on się nie wysłał, ale żebyśmy mogli wykonać naszą funkcję.

0:40Bo jak on się wyśle to strona się przeładuje i nici z naszego kodu.

0:44Zatem będę chciał się odwołać do tego formularza.

0:46On się znajduje tutaj

0:48i w momencie kiedy on będzie wysyłany chcemy przechwycić zdarzenie submit.

0:52Pobrałem sobie go już tutaj do stałej i za

0:54pomocą addEventListener dodamy mu zdarzenie submit.

0:57Chcę wtedy wykonać funkcję, którą tutaj

0:59podam, do niej otrzymam event i co ja będę chciał zrobić?

1:04Otóż będę chciał tutaj powiedzieć event.preventDefault.

1:09To jest metoda kolejna po takich metodach,

1:12które Ci pokazałem jak stopPropagation czy stopImmediatePropagation.

1:15To jest kolejna z metod, które pozwalają nam coś zrealizować z poziomu kodu

1:19JavaScript. Więc w ten sposób możemy zapobiec domyślnej akcji przeglądarki.

1:23Zobacz jeżeli teraz klikam Wyślij,

1:25kompletnie nic się nie dzieje, a normalnie ten formularz zostałby wysłany.

1:30Teraz, kiedy będziemy chcieli coś takiego zrobić. Wyobraź sobie, że będziemy chcieli

1:34sprawdzić, zrobić taką mini walidację czy firstName to co jest tutaj, czy

1:38wartość tego pola została wpisana. Jeśli została wpisana,

1:42ok, niech formularz się wyśle.

1:43W przeciwnym wypadku chcemy wyświetlić

1:45błąd. Więc będziemy mogli się tutaj odwołać do event.currentTarget

1:51i to będzie dokładnie to samo, co jakbyśmy tutaj napisali form, do którego mamy

1:55odwołanie od góry, ale ja wolę robić to w taki dynamiczny sposób.

1:58Czyli currentTarget już wiesz

1:59odwołuje się do elementu, na którym pisaliśmy zdarzenie i w środku tego

2:03formularza będę chciał sobie wyszukać pola, które ma name firstName.

2:07Pokazywałem Ci już wcześniej, że możemy w

2:09formularzach zrobić sobie to w formie takiej skróconej, czyli napisać firstName,

2:13bo na formularzu wszystkie pola, które mają podane name

2:17stają się od razu jego właściwościami. Więc firstName da nam odwołanie do tego pola.

2:21I też już Ci pokazywałem, że value zwraca nam to co jest wpisane w polu.

2:25Czyli jeżeli ktoś tam nic nie wpisał, więc porównam to do pustego ciągu znaków,

2:30tylko wtedy chcę zrobić preventDefault właśnie w ten sposób.

2:34W przeciwnym wypadku nie.

2:36Tutaj jeżeli zrobię peventDefault to jeszcze chcę wyświetlić alert

2:39Wpisz swoje imię. I zobacz co teraz się stanie.

2:44Jeżeli nic nie jest wpisane, klikam Wyślij.

2:46Zobaczymy alert Wpisz swoje imię,

2:48formularz się nie wysłał.

2:49Jeżeli cokolwiek tutaj wpiszemy, klikniemy wyślij,

2:52strona się przeładowała i widać, że to

2:54zostało tutaj podstawione, czyli wysłane razem z takim query string na serwer.

2:59A więc możemy w ten sposób warunkowo zapobiegać domyślnej akcji przeglądarki.

3:04Pokażę Ci jeszcze teraz jeden ciekawy przykład.

3:07Wyszukamy sobie w naszym formularzu

3:10pola, które ma firstName, czyli tego samego, ale zrobię to w inny sposób,

3:14bo mógłbym się odwołać do firstName,

3:16ale zrobię to inaczej, żeby Ci jeszcze bardziej uzmysłowić, że to jest

3:20dokładnie to samo, że można to robić na różne sposoby.

3:22Czyli chcę za pomocą querySelector

3:24wyszukać sobie elementu z identyfikatorem firstName, a mamy tam taki element,

3:28to jest dokładnie to samo pole i do niego będę chciał przypisać zdarzenie za pomocą

3:32addEventListener i będzie to zdarzenie keypress.

3:36To zdarzenie wywołuje się kiedy naciśniemy

3:38dowolny przycisk klawiatury, w momencie kiedy go naciśniemy i puścimy

3:42wtedy taka funkcja zostanie wykonana.

3:45I po co Ci to pokazuję?

3:47Po to, żebyś zobaczył, że można nawet

3:49stworzyć takie pole, które nie będzie przyjmowało np.

3:51literki a.

3:52Bo jeżeli ja tutaj wpiszę a i puszczę, to

3:54domyślną akcją przeglądarki w tym przypadku jest wpisanie tutaj a.

3:57Natomiast możemy temu zapobiec

4:00i zrobimy sobie takiego if i odwołamy się do tego globalnego obiektu

4:04String i on ma taką metodę jak fromCharCode i przekażemy tutaj event.charCode.

4:12Może zanim to zrobię, to jeszcze Ci

4:14pokażę, żebyś wiedział z czym my tutaj mamy do czynienia.

4:17Czyli zrobimy sobie event.charCode w ten sposób,

4:21zobacz, i teraz jak pisałem a to mamy 97 jak pisze s to jest to 115 itd.

4:27Czyli na tym obiekcie event można się

4:29odwołać do czegoś takiego jak charCode, ale nie chcę tutaj porównywać czy ten charCode

4:33to jest 97 bo nic mi to nie mówi jak patrzę na ten kod.

4:37Dlatego chciałbym to porównać.

4:39Czy ten charCode to jest literka a.

4:41I metoda String.fromCharCode jak tutaj podamy to 97 zamieni nam to na a.

4:46Czyli mogę w ten sposób sprawdzić

4:49czy została wciśnięta literka a, zamiast porównywać czy CharCode równa się 97.

4:54Jeżeli tak, zrobimy event.preventDefault.

4:57Czyli w ten sposób nie pozwolimy wpisać tutaj literki a.

5:00Zobacz, wciskam a,

5:01musisz mi uwierzyć na słowo i nic się nie

5:03da tutaj wpisać, ale każda inna literka już wchodzi.

5:06Co za tym idzie możesz zobaczyć, że

5:08domyślną akcją przeglądarki w tym przypadku było po prostu wstawienie tutaj

5:11tego tekstu i nawet takiej domyślnej akcji przeglądarki możemy zapobiec.

5:16Na koniec pokażę Ci jeszcze jeden życiowy przykład.

5:18Otóż mamy tutaj taki link i on ma takiego hash message i po kliknięciu w ten link

5:23jak widzisz ten hash jest tutaj dodawany, bo jest to domyślna akcja przeglądarki.

5:27Natomiast chciałbym to przechwycić i wziąć sobie to message i na podstawie

5:32tego co tutaj mam znaleźć element, który ma taki identyfikator on jest tutaj, on jest

5:36ukryty za pomocą tych styli i chciałbym go pokazać.

5:40Więc przypiszemy zdarzenie kliknięcia do tego linku za pomocą addEventListener click,

5:47następnie funkcja i od razu chcę zapobiec domyślnej akcji przeglądarki.

5:52OK, czyli już ten hash nie będzie dodawany

5:55do adresu URL i teraz będę chciał na stronie znaleźć sobie element, który ma

6:00taki identyfikator jak pobrany href. Więc najpierw sobie pobierzemy ten href

6:06równa się event.currentTarget, czyli ten link, który kliknęliśmy getAttribute href,

6:13pobraliśmy go sobie

6:15i ja tutaj skomentuję, że my będziemy mieli coś takiego jak message.

6:18Jak mamy coś takiego jak message to możemy

6:20zrobić document.querySelector i wiesz, że to message

6:23moglibyśmy tutaj podstawić, to nam znajdzie element z identyfikatorem

6:27właśnie message.

6:28To skoro ja to mam dynamicznie pobrane tutaj

6:30w href, to po prostu to href tutaj podstawię.

6:33Czyli w ten sposób znaleźliśmy odwołanie do tego elementu i żeby go pokazać

6:38przypiszemy mu style display block, bo on tutaj ma display none.

6:41Czyli jak już mam ten element, nie muszę

6:43go w żadnej zmiennej zapisywać, odwołamy się do style,

6:46to co już Ci pokazywałem w tym kursie

6:48i następnie display równa się block.

6:51Czyli tutaj zrealizowaliśmy ciekawe zadanie.

6:55Najpierw jednak sprawdźmy jak to działa.

6:56Klikam pokaż wiadomość i pokazała się ukryta wiadomość.

6:59Nic nie zostało dodane tutaj.

7:01I to jest fajny sposób na to, jak właśnie można do jakiegoś linku dodać sobie

7:05zdarzenie kliknięcia, zapobiec domyślnej akcji przeglądarki i następnie np.

7:09pobrać sobie ten href, na jego podstawie

7:11wyszukać innego elementu i pokazać go na stronie.

7:15Zapamiętaj zatem, że możesz w funkcji obsługi zdarzenia zapobiegać wielu

7:19domyślnym akcją przeglądarki na bazie jakiegoś warunku.

7:22Tutaj nie ma żadnego warunku, zawsze

7:24zapobiegamy, a tutaj zrobiliśmy warunek, że tylko jak wciśniemy literkę a, to

7:28chcemy nie pozwolić na wpisanie tej literki.