JavaScript: Czym jest bubbling

0:00W tej lekcji wytłumaczę Ci czym jest zjawisko nazywane bubbling.

0:05Zaczniemy od tego, że do przycisku btn

0:07będę chciał przypisać zdarzenie kliknięcia,

0:12tutaj sobie przechwycimy event,

0:14za moment z niego skorzystamy

0:16i teraz będę chciał powiedzieć kliknąłeś w przycisk.

0:22OK w ten sposób.

0:24I teraz o co chodzi? Klikam sobie,

0:26oczywiście to się pojawia. W bubblingu

0:28chodzi o to, że my przypisaliśmy

0:29zdarzenie kliknięcia do przycisku, ale na każdym z jego rodziców również

0:35zostanie wywołane zdarzenie kliknięcia. Czyli zobacz,

0:38jeżeli my klikamy w ten przycisk i on znajduje się tutaj,

0:41to jeżeli będą przypisane zdarzenia, kliknięcia do tego kontenera też się

0:45wywołają, bo nie musimy kliknąć bezpośrednio w ten kontener

0:48jeżeli klikniemy w przycisk to też kliknęliśmy w kontener.

0:51Jeżeli do section będą przypisane zdarzenia też się wywołają, mimo tego, że

0:55kliknęliśmy w przycisk i podobnie będzie z body.

0:58Żeby to pokazać zrobimy tak, że do body, które mam u góry pobrane przypiszemy

1:02zdarzenie kliknięcia i tym razem zrobimy sobie tutaj Kliknąłeś w body.

1:13OK.

1:14No i zobacz jeżeli sobie klikam gdzieś w body bezpośrednio, chociaż tak naprawdę to

1:17klikam w kontener, ale pokazuje się kliknąć w body.

1:20Zobacz co stanie się jeśli kliknę w

1:22przycisk. Mamy Kliknąłeś w przycisk i Kliknąłeś w body.

1:26Ale zauważ jaka tutaj jest kolejność.

1:28Przypisałem najpierw zdarzenie kliknięcia do body, a potem do przycisku, a mimo tego

1:33najpierw zobaczyliśmy Kliknąłeś w przycisk, a później Kliknąłeś w body.

1:37I właśnie na tym polega bubbling, że jeżeli przypiszemy zdarzenie kliknięcia do

1:41przycisku i klikniemy sobie w ten przycisk,

1:44to wywoła się funkcja, która do niego była przypisana, czyli to jest ta funkcja.

1:48Następnie będzie to bubblowało, mówiąc tak

1:51bardzo potocznie w górę do kolejnego rodzica, czyli do kontenera.

1:56Czy na kontenerze jest jakaś funkcja przypisana?

1:58Nie jest.

1:58Lecimy dalej. Czy jest przypisana na section?

2:00Nie jest. Lecimy wyżej.

2:02Czy na body jest przypisana jakaś funkcja?

2:04Jest, to ją wywołaj.

2:05Czyli innymi słowy kliknięcie w dowolny element sprawia, że jest uruchamiane

2:10również to zdarzenie kliknięcia na wszystkich jego rodzicach

2:13i jeżeli jakaś funkcja była do tego przypisana, to ona zostanie wywołana.

2:17I teraz co my możemy z tym zrobić, jeżeli nie chcielibyśmy, aby klikając w przycisk

2:21wywoływały się również funkcje, które mogą być przypisane do rodziców, np.

2:26do body? Otóż okazuje się, że ten event, który

2:29jest tutaj przekazywany, my w poprzedniej lekcji z niego odczytaliśmy sobie np.

2:32Target czy currentTarget, ale

2:34jest to obiekt, który zawiera różne metody.

2:37Jedną z takich metod jest metoda stopPropagation,

2:40czyli zatrzymaj tę propagację do góry.

2:44Jeżeli coś takiego zrobimy to oznacza wywołaj tę funkcję tutaj zatrzymaj

2:48propagację, czyli już nie leć do góry nie wywołuje tego zdarzenia wyżej.

2:53Zobaczmy w konsoli. Klikam teraz w przycisk i widzimy tylko

2:56kliknąłeś w przycisk a więc body można powiedzieć już o tym, że zostało

3:00kliknięte. Ale jeżeli kliknę gdzieś indziej zobaczymy

3:03Kliknąłeś w body, bo ten kod ze stopPropagation po prostu się w żaden sposób

3:07nie wykona, bo on jest wykonywany tylko jeśli klikniemy przycisk.

3:11Za chwilę jeszcze pokażę Ci praktyczny przykład do czego może się to przydać, ale

3:15na koniec chcę pokazać jeszcze jedną istotną rzecz. Co by się stało w sytuacji,

3:19gdybyśmy do tego przycisku mieli przypisane dwa zdarzenia kliknięcia?

3:23Czyli mamy jedno i mamy drugie,

3:25wyrzucę to stopPropagation i napiszę tutaj Kliknąłeś przycisk ponownie.

3:30Czyli dopiszemy tutaj

3:31ponownie. Zastanówmy się co się dzieje.

3:36Po kliknięciu w przycisk wywoła się najpierw ta funkcja, bo ona była jako

3:39pierwsza zdefiniowana, więc zobaczymy console.log kliknąłeś w przycisk.

3:43No ale skoro kliknęliśmy, a tutaj mówimy, że na kliknięcie chcemy wywołać

3:47jeszcze tę funkcję, to wywoła się również ten console.log.

3:49Zobaczmy.

3:50Jak widzisz Kliknąłeś w przycisk i Kliknąłeś w przycisk ponownie.

3:54Natomiast czasami może się zdarzyć tak, że

3:57chcemy nie tylko zatrzymać tę propagację, która idzie do góry, ale również zatrzymać

4:01wywoływanie się innych funkcji przypisanych do tego samego elementu.

4:05Czyli chciałbym zrobić tak, że jak kliknę w ten przycisk to żeby się wywołała

4:09wyłącznie ta funkcja i żadna inna, która mogła być do tego elementu przypisana.

4:14W tym celu korzystamy z metody

4:15stopImmediatePropagation i ona oczywiście nie musi być używana razem z tą.

4:20Ta nie jest potrzebna

4:21wtedy, zobaczmy.

4:24Klikam w przycisk i widzimy tylko Kliknąłeś w przycisk.

4:27Czyli nawet ta kolejna funkcja nie została wywołana.

4:31To może być przydatne w bardzo specyficznych przypadkach, ale gdzieś

4:34sobie to zanotuj i zapamiętaj, że jest taka możliwość.

4:37Zostawimy sobie tutaj może jedno i drugie.

4:39A na koniec przejdę na Eduweb i pokażę Ci

4:41praktyczny przykład, kiedy stopPropagation może być przydatne.

4:45Jesteśmy na Eduweb i mamy tutaj coś takiego, że jak najedziemy na ten header

4:49to zauważ, że nam się pojawia wyszukiwarka i menu i tutaj jest przypisane zdarzenie

4:53nie kliknięcia i nie click ale mouseenter czyli po najechaniu myszą

4:58tutaj sobie wykonujemy jakiś kod który nam to pokazuje.

5:01I problem jaki mieliśmy jest taki, że tutaj mamy taki widget z zespołami i po

5:04najechaniu na niego chcemy go po prostu rozwijać.

5:07Problem był po prostu taki, że skoro

5:09mamy do całego tego górnego paska przypisane zdarzenie, że na mouseenter

5:14chcemy zrobić coś takiego, zakrywało nam to te zespoły. I w momencie kiedy najechało by

5:19się na te zespoły, no to działo się dokładnie coś takiego jak teraz.

5:23I to jest idealny przykład tego jak wykorzystać stopPropagation.

5:26A więc do tego elementu, który jest tutaj przypisałem zdarzenie mouseenter, czyli

5:31że po najechaniu na ten element chcemy go w jakiś taki sposób rozwijać,

5:34ale od razu dodałem tam również stopPropagation.

5:37I to oznacza, że jak najedziemy na ten element również

5:41najechaliśmy na cały ten pasek, ale ten

5:43pasek o tym nie wie mimo tego, że do niego jest przypisane też takie zdarzenie.

5:47Więc tutaj stopPropagation było wręcz niezbędne.

5:50Jeżeli bym tego nie dodał to po najechaniu

5:52na ten element ten cały element zauważał, że przecież też na niego najechaliśmy, no i

5:57wykonywał dokładnie taką akcję jak tutaj widzisz.

5:59Natomiast stopPropagation po najechaniu na ten element sprawiło, że cały ten pasek nie

6:04otrzymał zdarzenia mouseenter i dzięki temu możemy pozostać w takim stanie nie

6:08zamieniając tego na pasek z wyszukiwarką i z menu.