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>
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.stopPropagation – Event.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.stopPropagation – Event.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.
