JavaScript: Czym jest “capturing”?
od Podstaw
10 godz. 55 min · JavaScript · Full-stack i Programowanie
Piotr PalarzWeb DeveloperCzego się nauczysz
- Wstep do programowania oraz najwazniejsze konstrukcje jezyka
- Liczne “smaczki” zwiazane z kazda z konstrukcji
- Obiektowy Model Dokumentu i DOM API
- Wyszukiwanie elementów na stronie
- Tworzenie nowych, praca z ich trescia, atrybutami, stylami CSS
- Odczytywanie wspólrzednych polozenia elementu i jego wymiarów
- Obsluga zdarzen i debugowanie kodu
- Praktyczne projekty
- I wiele, wiele wiecej!
Witaj w kursie JavaScript od Podstaw!
Jeśli poznałeś już wymienione wyżej technologie, to zapewne zdajesz sobie sprawę z ich ograniczeń. Za pomocą języka HTML tworzymy bowiem strukturę dokumentu, dodajemy treść tekstową, obrazy czy wideo. Aby jednak strona internetowa wyglądała perfekcyjnie, korzystamy z arkuszy stylów CSS, które pozwalają nam opisać wygląd wszystkich elementów HTML, ustawić wielkość tekstu czy dodać tło strony. No właśnie, ale gdzie tutaj interakcyjność?Zapewne już wiesz, że język CSS oferuje tzw. pseudoklasy, które pozwalają nam np. przypisać zmianę koloru elementu po najechaniu na niego kursorem myszy. I to tak naprawdę wszystko, na co możemy zareagować. A co gdybyśmy chcieli po wciśnięciu jakiegoś przycisku wysunąć ukryty panel, sprawdzić poprawność wypełnianego właśnie formularza lub pobrać dane z serwera i wyświetlić je na stronie bez przeładowywania witryny? Dobra wiadomość jest taka, że to wszystko jest możliwe z użyciem języka JavaScript, który “rozumie” każda przeglądarka internetowa.Choć język JavaScript powstał jako język skryptowy na potrzeby stron internetowych, to już dawno temu “wyszedł” z przeglądarek internetowych i może być używany tak naprawdę gdziekolwiek. W kursie, który masz przed sobą, poznasz język JavaScript jako niezależny język programowania, a dopiero później dowiesz się, jak wykorzystywać go do wzbogacania stron internetowych. Dzięki postawieniu grubej linii pomiędzy samym językiem, a Obiektowym Modelem Dokumentu dostępnym w przeglądarkach internetowych, będziesz nie tylko bardzo dobrze rozumiał sam język, ale w przyszłości wykorzystasz go do innych zastosowań.Na początku omówimy ciekawą historię języka JavaScript, a chwilę później rozpoczniemy poznawanie najważniejszych jego konstrukcji. I tak dowiesz się czym są zmienne, jakie typy danych dostępne są w tym języku, czym są liczne operatory, instrukcje warunkowe, pętle, tablice, obiekty i funkcje. Wszystkie te zagadnienia są bardzo podobne w innych językach programowania, dlatego kurs ten jest również świetnym wstępem do programowania w ogóle. Każda z przedstawianych konstrukcji języka jest bardzo dokładnie tłumaczona z myślą osobach początkujących. Nie zmienia to jednak faktu, że nawet osoby znające już podstawy języka JavaScript znajdą tutaj coś dla siebie, gdyż na każdym etapie przedstawiane są również liczne ciekawostki odnośnie danej konstrukcji.Kiedy zrozumiesz już jak działa język JavaScript, przejdziemy do drugiej połowy kursu, gdzie dokładnie omówimy Obiektowy Model Dokumentu, dostępny w przeglądarkach internetowych. Zobaczysz jak przeglądarka tworzy z kodu HTML drzewo dokumentu, jak reprezentowane są poszczególne jego węzły, a także jak język JavaScript potrafi z tym “wewnętrznym światem” współpracować. Dowiesz się jak wyszukiwać na stronie interesujących nas elementów HTML, a także jak tworzyć nowe elementy, przypisywać im treść i wstawiać je na stronę. Popracujemy również z atrybutami elementów, ich klasami i wreszcie ze stylami CSS, abyśmy mogli wpływać dynamicznie na wygląd naszej strony.Zobaczysz również, jak możemy w dowolnym momencie odczytać współrzędne położenia elementu na stronie, a także jego wysokość czy szerokość. Tę wiedzę wykorzystamy później w praktycznym przykładzie.Jeden z rozdziałów kursu poświęcony został zdarzeniom, a więc możliwości reagowania na zachowania użytkownika. Dzięki temu zobaczysz, jak możemy przypisać np. zdarzenie kliknięcia do wybranego elementu, a kiedy zostanie on kliknięty, wykona się przygotowany przez nas kod. Poznasz kilka różnych sposobów na przypisywanie oraz usuwanie zdarzeń, a także dowiesz się czym jest tzw. “bubbling” oraz “capturing” czy jak zablokować domyślną akcję przeglądarki.Przy pisaniu jakiegokolwiek kodu, zawsze pojawiają się błędy, dlatego i tutaj Twoje wątpliwości nie pozostaną bez odpowiedzi. Poznasz wszystkie typu błędów, które mogą się pojawić podczas wykonywania naszego kodu, a także wiele sposobów ich wykrycia i wyeliminowania.W kursie nie brakuje oczywiście praktycznych przykładów, które celowo zostały ułożone tak, aby wykorzystać w nich jak najwięcej zdobytej wcześniej wiedzy. Nie zostaniesz więc sam z poczuciem, że co prawda rozumiesz jak działa dana konstrukcja, ale nie masz pomysłu, kiedy z niej skorzystać. Na początek wykonamy praktyczny projekt losowania liczb z wybranego przedziału tak, aby nie mogły się powtórzyć. Już przy tym projekcie poznasz wiele ciekawych technik i sztuczek.Następnie przejdziemy do nieco bardziej zaawansowanego przykładu i napiszemy skrypt, który pozwoli nam sortować dane w tabeli po wybranych kolumnach, kiedy któraś z nich zostanie kliknięta. Zobaczysz jak sortować dane zarówno malejąco jak i rosnąco, a także jak zmieniać kolejność elementów HTML na stronie.W kolejnym projekcie zajmiemy się walidacją danych wpisywanych do formularza, by ten nie mógł zostać wysłany do serwera tak długo, jak zawiera jakiekolwiek błędy. Zobaczysz tutaj zdarzenia związane z polami formularza, a także sposoby na pobieranie z nich wartości i sprawdzanie czy są one poprawne. Zadbamy także o wrażenia użytkownika i wyświetlimy na stronie stosowne błędy, a także podświetlimy źle uzupełnione pola na czerwono.W przedostatnim projekcie wstawimy na stronę przycisk, który będzie się pojawiał po przewinięciu strony w dół, a znikał po odwrotnej akcji. Co jednak ciekawe, po jego kliknięciu, strona zostanie automatycznie, płynnie przewinięta do samej góry.W ostatnim projekcie stworzymy bardzo efektowny dymek z podpowiedzią, który będzie się pojawiał nad elementem po najechaniu na niego kursorem myszy. Wykorzystamy tutaj mnóstwo ciekawych technik. Dowiesz się również jak swój kod przygotować w taki sposób, abyś mógł go udostępnić innym osobom, by w łatwy sposób skorzystały z przygotowanego Tooltipa na swoich stronach.Kurs kończy się sekcją Tips & Tricks, w której znajdziesz 10 krótkich lekcji. W każdej z nich została omówiona jedna sztuczka. Każda z nich pozwoli Ci jeszcze lepiej zrozumieć język JavaScript, ale przede wszystkim zaoszczędzić czas i kilka linijek często niepotrzebnego kodu.Podsumowując, kurs ten jest nie tylko wprowadzeniem do samego języka JavaScript, ale także do Obiektowego Modelu Dokumentu. Dzięki wyraźnemu rozdzieleniu tych dwóch zagadnień, będziesz mógł w przyszłości wykorzystać język JavaScript także do innych zastosowań, poza przeglądarką internetową.
Kurs JavaScript od Podstaw to między innymi:
- Wstęp do programowania
- Najważniejsze konstrukcje języka
- Liczne “smaczki” związane z każdą z konstrukcji
- Obiektowy Model Dokumentu i DOM API
- Wyszukiwanie elementów na stronie
- Tworzenie nowych, praca z ich treścią, atrybutami, stylami CSS
- Odczytywanie współrzędnych położenia elementu i jego wymiarów
- Obsługa zdarzeń
- Debugowanie kodu
- Praktyczne projekty
- I wiele, wiele więcej!
Dla kogo jest ten kurs?
Kurs ten jest dla wszystkich osób, które znają już podstawy HTML i CSS i chciałyby przejść poziom wyżej i dodać do swoich stron dynamiczności. Żadna wcześniejsza wiedza z zakresu JavaScript czy programowania nie jest wymagana, gdyż wszystkie konstrukcje są starannie tłumaczone. Materiał ten będzie również świetnym odświeżeniem i usystematyzowaniem wiedzy dla osób, które już z tym językiem miały do czynienia. Po przerobieniu tego kursu będziesz gotowy, by poznawać język JavaScript dalej, z kursem JavaScript w Praktyce, który powstał jako dopełnienie tego kursu i porusza nieco bardziej zaawansowane tematy, na które tutaj zabrakło już czasu.
W tej lekcji wyjaśnię ci na czym polega capturing, przejdziemy od razu do kodu.
Chcę ci przypomnieć, że kiedy przypisywaliśmy zdarzenia za pomocą addEventListener, to mieliśmy tutaj trzeci
parametr, pierwszy rodzaj zdarzenia.
Drugie funkcja, która będzie to zdarzenie obsługiwać.
A trzeci, to było właśnie capturing, a konkretnie useCapture, czyli moglibyśmy je tak nazwać.
Jeżeli tutaj przypiszemy true, to chcemy używać capturing.
Jeżeli false, to nie chcemy go używać.
Przepisywaliśmy false i raz jeszcze prześledźmy jak działa tutaj bubbling.
Czyli przypisałem sobie zdarzenie kliknięcia np. do przycisku i dwa razy.
Zdarzenie kliknięcia do body.
Najpierw to Kliknąłeś w body, a potem Kliknąłeś w body ponownie.
Co stanie się kiedy klikniemy w przycisk? Wykona się Kliknąłeś przycisk.
Później body, a później Kliknąłeś body ponownie.
Mówiłem ci że bubbling idzie w górę, czyli najpierw kliknęliśmy na element przycisk.
Następnie szukamy, czy jest jakieś zdarzenie i na jego rodzicu i tak dalej.
Czyli bubbling, to jest jakby taka podróż w górę, w naszej strukturze.
Jeżeli byśmy tutaj zajrzeli, czyli button, potem jeżeli na body jest coś przypisane i tak dalej.
Natomiast, co stanie się, jeżeli tutaj wpiszemy true np. w tym oto miejscu. Użyjemy capturing i zobacz co się stanie
po odświeżeniu Kliknij mnie. Kliknąłeś w body.
Następnie Kliknąłeś w przycisk i kliknąłeś w body ponownie, troszkę dziwne, prawda.
I teraz właśnie wytłumaczę ci, jak działa capturing, czyli najpierw zdarzenie idzie w dół, a później idzie
w górę.
Oznacza to tylko tyle, że jeżeli klikniemy na przycisk to najpierw sprawdzane są jego rodzice, czyli zdarzenie
jakby idzie od samej góry do samego dołu, czyli sprawdzamy body, idziemy w dół.
Idziemy jeszcze w dół i dochodzimy do button. Wywołujemy na nim zdarzenie i idziemy z powrotem w górę.
Jeżeli tutaj useCapture jest ustawione na false, to podczas tej fazy capturing, kiedy właśnie schodzimy
w dół, jak widzisz teraz to działa normalnie, nie są wykonywane zdarzenia.
Czyli jeżeli ja dla body przypisałem zdarzenie kliknięcia i kliknąłem na przycisk to od body właśnie idziemy
w dół, ale nie sprawdzamy, czy tutaj jest jakieś zdarzenie, a konkretnie go nie wywołujemy. Schodzimy na sam
dół, do button, wywołujemy jego zdarzenie i capturing został zakończony.
Teraz zaczyna się bubbling. Idziemy z powrotem w górę do dokumentu i idziemy w górę i wtedy wywołujemy
odpowiednie zdarzenia.
Jeżeli tutaj było false, natomiast, jeżeli przypiszemy true, to oznacza, że chcemy wywołać zdarzenie click.
Podczas fazy capturing, która właśnie jest na początku, czyli teraz po kliknięciu, od razu mamy Kliknąłeś w
body, bo tak jak wspomniałem faza capturing tutaj się zaczyna.
Czyli znowu sprawdzamy czy dla body jest przypisane jakieś zdarzenie kliknięcia i czy było ono oznaczone
jako useCapturing.
Tak, to chcemy je od razu wywołać i schodzimy w dół.
Wywołujemy to co było dla button.
Przypominam, że to było false, w tym miejscu i dla body następne zdarzenie było ustawione na false, czyli
jedno się wykonało jako Kliknąłeś w body, później kliknąłeś przycisk, a potem zaczęła się faza znowu
bubbling i idziemy w górę. Doszliśmy znowu do body, sprawdzamy, że tutaj było ustawione capturing na false.
To znaczy, że chcemy podczas fazy bubbling wykonać to zdarzenie i ono się teraz tutaj wykonało.
Mam nadzieję, że to dobrze zrozumiałeś.
Czyli na początku, po kliknięciu czy po jakimkolwiek innym zdarzeniu, mamy taką fazę jak capturing, a później
bubbling.
Jeżeli chcemy, aby podczas capturing pewne zdarzenia się wykonały, pewne funkcje, to musimy tutaj użyć
true.
W praktyce, bardzo rzadko będziemy z tego korzystać.
Natomiast, teraz chciałbym Ci pokazać jeszcze jedną rzecz, mianowicie coś takiego jak eventPhase.
Będziemy chcieli sobie tutaj zrobić console.log.
Odwołamy się do obiektu ze zdarzeniem i do eventPhase. Mamy kilka faz takich event'ów i teraz będę chciał
je wszędzie, w każdym z tych zdarzeń, wyświetlić na dole wrzucę ci komentarz, abyś wiedział o co chodzi.
Czyli phase 1 jest to capturing, phase 2 jest on target, a phase 3 jest to bubbling.
Jeżeli zostawimy true, to widziałeś, jak te zdarzenia się wykonują.
Sprawdźmy.
Klikam, no i mam phase 1.
Czyli zostało wykonane zdarzenie Kliknąłeś w body.
Skoro tutaj została zwrócona Jedynka, to oznacza, że byliśmy w fazie capturing, to zdarzenie się wywołało
bo tutaj było true.
Następnie szliśmy sobie w dół.
Doszliśmy do tego oto zdarzenia, czyli tutaj mamy event
phase 2.
Jak możesz zobaczyć i kliknąłeś w przycisk, 2 to znaczy on target, a więc dotarliśmy do celu, bo celem był
nasz przycisk, bo to w niego kliknęliśmy i potem zaczęliśmy iść w górę.
I tutaj mamy eventPhase.
Tutaj mieliśmy oczywiście przycisk, a tutaj eventPhase, mamy znowu na body.
Jest ono określone jako 3, czyli zaczęliśmy iść w górę eventPhase to było 3, a więc bubbling tak jak to
zapisałem w tym miejscu.
Jak wspomniałem, nie często korzystamy z capturing, ale wydaje mi się że jest bardzo ważne, aby rozumieć
w jaki sposób event'y działają, a więc po kliknięciu najpierw jedziemy w dół i to nazywa się capturing,
a potem odbijamy w górę i to nazywa się bubbling i to od nas zależy, kiedy jakieś zdarzenie zostanie
wykonane.
Kod
Czym jest “capturing”? · 1 min
var body = document.body,
btn = document.querySelector("#btn");
body.addEventListener("click", function(e) {
console.log(e.eventPhase);
console.log("Kliknąłeś w body");
}, true);
body.addEventListener("click", function(e) {
console.log(e.eventPhase);
console.log("Kliknąłeś w body ponownie");
}, false);
btn.addEventListener("click", function(e) {
console.log(e.eventPhase);
console.log("Kliknąłeś przycisk");
}, false);
// phase 1 - capturing
// phase 2 - on target
// phase 3 - bubbling