JS event propagation

Udostępniając artykuł pomożesz mi rozwinąć blog. Weź w tym udział!

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.

 

Udostępniając artykuł pomożesz mi rozwinąć blog. Weź w tym udział!

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *