JS event propagation

Dowiesz się co to jest event propagation, event bubbling, do czego służy oraz jakie stoją za tym pułapki


Odpal konsolę (F12) i zerknij na ten przykład:

Dodałem nasłuchiwanie zdarzenie „click” do każdego elementu
Po kliknieciu w przycisk w konsoli wyświetli się

"td"
"tr"
"table"
"table"
"div"

To co widzisz w konsoli, znane jest jako event bubbling, czyli obsługa kolejności wywołania zdarzenia  w  przodkach elementu, jest to kawalek mechanizmu zwanego, event propagation.
Brzmi skomplikowanie, ale takie nie jest.
Event propagation, daje nam możliwosć  złapania zdarzenia niekoniecznie na poziomie w którym ono nastapiło. Np Mamy formularz, klikamy guzik submit, i chcemy wyslac caly formularz, a nie treść buttona.

<form onsubmit=”zrob cos”>

<input/>

<input/>

<button type=”submit”>wyslij</button>

</form>

Event został stworzony w button, jest propagowany  do form i tam obsługiwany .

Obrazek w którym możemy zobaczyc jak to dziala znajdziemy tutaj

Mechanizm został stworzony w celu optymalizacji, by nie musieć tworzyc wielkiej ilości eventów, a tylko jeden.

Wewnarz zdarzenia eventConsole możemy się odwolać:
przez this do elementu który własnie obsługuje zdarzenie, lub przez event.target do elementu który spowodowal zdarzenie.

Proste i użyteczne, i można by bylo na tym skończyc, gdyby nie to, że czasem nie chcemy takiego zachowania.

Np mamy rozwijane menu/modal które chcemy zwinać w momęcie klikniecia gdzieś poza nim.
Ogólnie robi się to w taki sposób, że do elementu body dodajemy event listener, który zamyka to menu/modal.
Przykład znajduje się tutaj:

Jednak po kliknieciu w buton nic się nie dzieje! Gdzie jest blad?

Spójrz w konsole, problem w tym że się dzieje i to za duzo. Event click został  wywolany na przycisku menu, a potem spopagowany do elementu body. Jak sobie z tym poradzic?

Otóż standard DOM definiuje metodę event.stopPropagation. Która przerywa propagacje. Więc jedyne co trzeba zrobić, to dodać do event lisinera buttona, wywolanie metody event.stopPropagation()
Można zobaczyc to tutaj:

 

Wszystko dziala!
…a nie, jednak nie, kliknijcie w dowolny link w menu, spowoduje zamkniecie menu.
Zastanów się co nalezy zrobic, by menu nie zamykalo się, po kliknieciu w nie, a potem zaimplementuj to!

Powodzenia

Na koniec fajne rzeczy które warto wiedziec.

Event posiada nastepujace metody:

Przyklad :

Zdarzenia które nie sa propagowane w gore:

  • blur
  • focus
  • load
  • unload

Zdarzenia które powoduja natywne przerwanie propagacji:

  • click na formularzu powodujacy submit
  • click na linku  (element a)

powyższe zdarzenia powoduja przeładowanie strony, jeżeli chcemy by jednak event propagation nastapił musimy wywołać event.preventDefault.

 

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *