event stoppropagation stopimmediatepropagation ach te internety
JS

Event.stopPropagation vs Event.stopImmediatePropagation

Krótka sprawa. Wydawałoby się, dosyć prosta. Jednak nierzadko staje się źródłem ciarek na plecach i zgrzytania zębów. Koniec owijania w bawełnę, ważny temat przed nami. Panie, Panowie – propagacja zdarzeń.

Event propagation

Aby wyjaśnić różnice pomiędzy Event.stopPropagation oraz Event.stopImmediatePropagation, musimy zacząć od wyjaśnienia mechanizmu propagacji zdarzeń w Javascripcie (event propagation). Bardzo krótko, obiecuję Opisuje on sposób przechwytywania zdarzeń takich jak: click – kliknięcie myszki, keypress – wciśnięcie klawisza na klawiaturze, submit – wysłanie formularza, itd.

Owy mechanizm event propagation składa się z 3 faz:

1. capturing

Przechwytywanie i wywoływanie napotkanych event handlerów danego typu w kierunku od Document do elementu, który de facto wywołał zdarzenie.

Ta faza jest rzadko wykorzystywana, jeśli chcesz włączyć jej detekcję, musisz np. w czystym JSie dodać trzeci parametr true do metody addEventListener(), (jako skrót {capture: true}).

elem.addEventListener(..., {capture: true})
// lub
elem.addEventListener(..., true)

React z kolei udostępnia dedykowane zdarzenie onClickCapture właśnie do przechwytywania fazy capture.

<button onClickCapture="beAwesome()">
  Click, if you want to become unicorn!
</button>

2. target

Faza, która wywołuje się, kiedy mechanizm propagacji dochodzi do elementu docelowego, który wywołał zdarzenie.

Nie posiada własnego handlera, sposobu detekcji, jest wywoływana zarówno dla handlera fazy capture, jak i fazy bubble.

3. bubbling

Powrót od elementu wywołującego zdarzenie do Document; przechwytywanie i wywoływanie napotkanych event handlerów danego typu.

Ta faza jest domyślnie aktywna. Aby uruchomić jej detekcję, korzystamy ze standardowego handlera:

elem.addEventListener(...)
// lub
elem.addEventListener(..., false)

React z kolei udostępnia zdarzenie onClick, które domyślnie przechwytuje właśnie fazę bubble.

<button onClick="beAwesome()">
  Click, if you want to become unicorn!
</button>
capturing vs bubbling
Żródło: https://www.tutorialrepublic.com/javascript-tutorial/javascript-event-propagation.php

Więcej o propagacji zdarzeń tutaj nie napiszę, gdyż nie jest to celem mojego artykułu. Chcę, żebyś dotrwał do końca mojego posta, drogi Czytelniku, więc przejdę teraz do sedna sprawy.

Obie metody, Event.stopPropagation() oraz Event.stopImmediatePropagation, służą do blokowania faz capturing oraz bubbling.

Event.stopPropagation

Najczęściej wykorzystujemy Event.stopPropagation w celu zatrzymania bąbelkowania. Kiedy wywołujemy zdarzenie na elemencie wewnętrznym, nie chcemy, aby w fazie bubbling automatycznie odpalił się event handler dla jego rodzica. I to jest sytuacja, która obejmuje większość przypadków wykorzystania Event.stopPropagation.

Event.stopPropagation blokuje przejście mechanizmu propagacji na kolejny poziom w hierarchii DOM, jednak nie blokuje uruchomienia innych event handlerów przypiętych do elementu, na którym mechanizm się zatrzymał.

Event.stopImmediatePropagation

W odróżnieniu od Event.stopPropagationEvent.stopImmediatePropagation nie tylko blokuje przejście mechanizmu propagacji na kolejny poziom w hierarchii DOM – ono blokuje wywołanie jakichkolwiek innych event handlerów przypiętych do elementu, na którym mechanizm się zatrzymał.


Mam dla Ciebie codepena z dobrą bazą do zabawy z Event.stopPropagationEvent.stopImmediatePropagation. Póki co wykomentowałam te metody, żebyś 1) zobaczył na początku całe event flow 2) miał wolną rękę w sposobie testowania metod.

See the Pen Event.stopPropagation() Event.stopImmediatePropagation() by sourire09 (@sourire09) on CodePen.0


Bonus

Szukając informacji o Event.stopPropagation oraz Event.stopImmediatePropagation, z pewnością znajdziesz je w komplecie z opisem metody event.preventDefault(). Odpowiada ona za blokowanie wykonania przez przeglądarkę domyślnej akcji na elemencie. Może nią być zmiana adresu URL po kliknięciu na anchora (<a href=””…), zaznaczenie tekstu po podwójnym kliknięciu, itd.


Delegacja zdarzeń to temat rzeka. A ja wolę czytać (i pisać) krótkie formaty. Mimo wszystko mam nadzieję, że udało mi się zgrabnie ująć temat różnicy między Event.stopPropagation oraz Event.stopImmediatePropagation. Jeśli chcesz, abym omówiła dokładniej niektóre wątki z tego artykułu – śmiało daj znać w komentarzu

Źródła i więcej informacji o delegacji zdarzeń: Prod.IO, javascript.info.

Artykuły, które mogą Ci się spodobać...

Wpisz hasło, którego szukasz i naciśnij ENTER, aby je wyszukać. Naciśnij ESC, aby anulować.

Dawaj na górę