JavaScript: Czym jest capturing

0:00W tej lekcji porozmawiamy o capturing

0:02a jest to proces można powiedzieć odwrotny do bubbling.

0:06I teraz co będziemy chcieli zrobić?

0:07Mamy już taki kod jak widziałeś

0:10poprzednio, czyli rejestruje sobie zdarzenie kliknięcia w przycisk i w body.

0:14I teraz, w przypadku bubbling jeżeli ja

0:17kliknę sobie w przycisk, to mamy Kliknąłeś w przycisk i Kliknąłeś na body.

0:20Bo klikając ten przycisk klikam też w całe body.

0:24Ale kolejność jest taka, że najpierw mamy

0:26tutaj Kliknąłeś w przycisk, a potem Kliknąłeś w body.

0:29Jeżeli natomiast kliknę gdzieś poza

0:30przyciskiem, oczywiście najpierw będzie Kliknąłeś w body.

0:34Czyli to już wiesz. To jest bubbling.

0:36A więc klikając w przycisk rejestrujemy czy

0:39wywołujemy zdarzenie kliknięcia na wszystkich jego rodzicach, w tym na body.

0:43Natomiast przy przypisywaniu poprzez addEventListener jakiejś funkcji obsługi

0:47zdarzenia pokazywałem Ci, że trzeci parametr można ustawić na true lub false.

0:52Jeżeli nic nie podamy to domyślnie będzie

0:53to false i jeżeli podamy false to dokładnie tak samo to będzie działać.

0:57Ale tutaj możemy podać true i ten parametr nazywa się useCapture.

1:02Czyli czy ma być to wywołane w momencie capturing?

1:06I teraz czym jest capturing?

1:08Otóż okazuje się, że w momencie jak klikam na ten przycisk to to nie jest tak, że na

1:12nim jest wywoływane zdarzenie kliknięcia od razu i bubbluje to w górę.

1:16Najpierw mamy fazę capturingu, czyli od

1:18samej góry schodzimy w dół po wszystkich elementach, docieramy do przycisku,

1:23wywołujemy jego funkcję i rozpoczyna się bubbling.

1:26I domyślnie właśnie w tej fazie bubblingu wywoła się zdarzenie przypisane do body.

1:30Ale jeżeli rejestrując kliknięcie na body od razu powiemy, że chcemy wykonać tę

1:35funkcję w fazie capturing, to ona zostanie wywołana, kiedy właśnie będziemy jakby

1:40na początku schodzili w dół do tego przycisku.

1:42Czyli jak dam to na false albo to pominę

1:45jeszcze raz zobaczmy co się pojawi w konsoli.

1:47Klikam w przycisk i mam najpierw Kliknąłeś w przycisk,

1:50potem Kliknąłeś w body.

1:51Jeżeli przestawię to na true, zobacz co się stanie jak kliknę w przycisk.

1:56Najpierw mamy Kliknąłeś w body, a potem mamy Kliknąłeś w przycisk.

1:59Czyli za pomocą tego parametru możesz powiedzieć, że zdarzenie kliknięcia ma być

2:04tutaj wywołane w fazie capturing i to czasami może się okazać przydatne.

2:09I teraz przede wszystkim, kiedy może to

2:11się okazać przydatne. Ja Ci pokazałem w przypadku w bubblingu, że możemy zrobić coś

2:15takiego jak stopPropagation, więc na razie to jeszcze usuńmy.

2:19I chodziło o to, że po kliknięciu w

2:20przycisk nie chcę wywoływać zdarzenia kliknięcia w body.

2:24Wystarczyło tutaj na evencie zrobić stopPropagation.

2:27No bo skoro podczas właśnie

2:29bubblingu czyli tej propagacji jest wywoływane zdarzenie na body to to wystarczyło i

2:33teraz już na body to nie jest wywoływane. Bo capturing schodzi w dół,

2:38dochodzimy do button, klikamy i zaczynamy bubbling do góry.

2:42Ale skoro zabiliśmy stopPropagation to ten bubbling jest przerywany.

2:45Jeżeli natomiast tutaj powiem true mówiąc, że

2:48chcę tę funkcję wywołać w fazie capturing to wygląda to już inaczej.

2:52Zobacz, że wtedy

2:54ten stopPropagation nic nie daje jeżeli chodzi o tę funkcję.

2:58Oczywiście mogą tu być jeszcze inne

2:59funkcje, ale dla tej funkcji nie ma to wtedy żadnego znaczenia.

3:03Dlatego, że już w fazie capturingu, kiedy

3:07schodzimy w dół, dochodzimy do body, wywołujemy tę funkcję,

3:11potem schodzimy do button, na nim jest wywoływany stopPropagation, czyli

3:15przerywamy i nie idziemy do góry z bubblingiem. Ale już podczas capturing

3:20ta funkcja na body została wykonana.

3:22Czyli innymi słowy może być tak, że chcesz przypisać zdarzenie kliknięcia np.

3:26do body i chcesz mieć pewność, że nigdzie indziej, w żadnym kodzie Twoim lub cudzym

3:32nie będzie to zdarzenie przerwane przez to, że ktoś zrobił stopPropagation.

3:36I w ten sposób masz pewność, że właśnie zawsze Twoja funkcja zostanie wywołana.

3:40Zobacz co by było, gdybyśmy do body przypisali

3:42jeszcze jedno zdarzenie kliknięcia i napiszemy

3:45Kliknąłeś w body ponownie, ale tym razem przypiszemy je w taki standardowy sposób.

3:52Zobacz.

3:54Klikam i mamy Kliknąłeś

3:56w body i Kliknąłeś w przycisk. Nie mamy Kliknąłeś w body ponownie

4:00bo właśnie to byłoby wywołane w tej fazie bubbling, a zrobiliśmy stopPropagation.

4:05Natomiast jeżeli to wykomentuje,

4:09zobaczmy, klikam w przycisk mamy, Kliknąłeś w body,

4:12to się wykonało w fazie capturing,

4:14czyli to jest ta pierwsza funkcja,

4:16potem doszliśmy do przycisku i następnie

4:19rozpoczął się bubbling i dopiero wtedy wywołało się Kliknąłeś w body ponownie.

4:24Mam zatem nadzieję, że rozumiesz w jaki sposób to działa.

4:27Podsumowując, jeżeli chcesz przypisać zdarzenie, które będzie wywoływane zawsze

4:31i nie będzie zatrzymywane przez stopPropagation, dodaj tutaj sobie true w tym parametrze,

4:36ale zapewniam Cię, że 99 na 100 razy, a

4:39może nawet częściej będziesz tutaj wpisywał false albo po prostu pomijał ten

4:43parametr i w taki zwykły sposób przypisywał np.

4:46zdarzenia kliknięcia do elementu.