Zrozumienie propagacji zdarzeń w JavaScript

Zdarzenia w JavaScript działają jak powiadomienia, że ​​nastąpiła interakcja użytkownika lub inna akcja. Na przykład, gdy klikniesz przycisk formularza, Twoja przeglądarka generuje zdarzenie wskazujące, że to się stało. Wpisanie w polu wyszukiwania również wywołuje zdarzenia i tak często działa autosugestia online.

W JavaScript zdarzenia, które wiążą się z interakcją użytkownika, zwykle uruchamiają się na określonych elementach. Na przykład kliknięcie przycisku powoduje wywołanie zdarzenia w stosunku do tego przycisku. Ale wydarzenia również się rozprzestrzeniają: atakują inne elementy w hierarchii dokumentów.

Czytaj dalej, aby dowiedzieć się wszystkiego o propagacji zdarzeń i dwóch różnych dostępnych typach.

Co to jest obsługa zdarzeń w JavaScript?

Możesz użyć kodu JavaScript do przechwytywania i reagowania na zdarzenia wywoływane przez stronę internetową. Możesz to zrobić, aby zastąpić zachowanie domyślne lub podjąć działanie, gdy nie istnieje żadne ustawienie domyślne. Typowym przykładem jest sprawdzanie poprawności formularza. Obsługa zdarzeń umożliwia przerwanie normalnego procesu przesyłania formularza.

Rozważ ten przykład:

Kliknij

Powyższy kod zawiera element button z identyfikatorem o nazwie button. Posiada detektor zdarzeń kliknięcia, który wyświetla alert z komunikatem Witaj świecie.

Co to jest propagacja zdarzeń?

Propagacja zdarzenia opisuje kolejność, w jakiej zdarzenia przechodzą przez drzewo DOM gdy przeglądarka internetowa je uruchomi.

Załóżmy, że wewnątrz znacznika div znajduje się znacznik formularza i oba mają detektory zdarzeń onclick. Propagacja zdarzeń opisuje, w jaki sposób jeden detektor zdarzeń może uruchamiać się po drugim.

Istnieją dwa rodzaje propagacji:

1. Propagacja zdarzeń, dzięki której zdarzenia bulgoczą w górę, od dziecka do rodzica.
2. Przechwytywanie zdarzeń, dzięki któremu zdarzenia przemieszczają się w dół, od rodzica do dziecka.

Co to jest propagacja zdarzeń w JavaScript?

Propagacja zdarzenia oznacza, że ​​kierunek propagacji zdarzenia będzie przebiegał od elementu podrzędnego do jego elementu nadrzędnego.

Rozważmy następujący przykład. Ma trzy zagnieżdżone elementy: div, form i button. Każdy element ma Kliknij detektor zdarzeń. Przeglądarka wyświetla alarm z komunikatem po kliknięciu każdego elementu.

Domyślnie kolejność wyświetlania alertów przez przeglądarkę to button, formularz, a następnie div. Wydarzenia wznoszą się od dziecka do rodzica.

 div


 Formularz 



 Przycisk

Co to jest przechwytywanie zdarzeń?

W przypadku przechwytywania zdarzeń kolejność propagacji jest przeciwieństwem bulgotania. Poza tym koncepcja jest identyczna. Jedyna różnica w łapaniu polega na tym, że zdarzenia zachodzą od rodzica do dziecka. W przeciwieństwie do poprzedniego przykładu, w przypadku przechwytywania zdarzeń, przeglądarka wyświetli alerty w następującej kolejności: div, form i button.

Aby osiągnąć przechwytywanie zdarzeń, wystarczy wprowadzić tylko jedną zmianę w kodzie. Drugi parametr dodajOdbiornikZdarzeń() określa rodzaj propagacji. Domyślnie jest fałszywe, aby reprezentować bąbelkowanie. Aby włączyć przechwytywanie zdarzeń, musisz ustawić drugi parametr na true.

 div.addEventListener("kliknij", ()=>{
 alert("div")
 }, prawda);
 form.addEventListener("kliknij", ()=>{
 alert("formularz")
 }, prawda);
 button.addEventListener("kliknij", ()=>{
 alert("przycisk")
 }, prawda);

Jak możesz zapobiec propagacji wydarzeń?

Możesz zatrzymać propagację zdarzeń za pomocą zatrzymajPropagację() metoda. ten dodajOdbiornikZdarzeń() Metoda przyjmuje nazwę zdarzenia i funkcję obsługi. Program obsługi przyjmuje jako parametr obiekt zdarzenia. Ten obiekt zawiera wszystkie informacje o zdarzeniu.

Kiedy wywołujesz zatrzymajPropagację() metody, zdarzenie przestanie się rozprzestrzeniać od tego momentu. Na przykład, gdy używasz zatrzymajPropagację() w elemencie formularza zdarzenia przestaną bulgotać do elementu div. Jeśli klikniesz przycisk, zobaczysz zdarzenia wywołane na przycisku i formularzu, ale nie na div.

form.addEventListener("kliknij", (e)=>{
e.stopPropagacja();
 alert("formularz");
});

Związane z: Najlepsza ściągawka JavaScript

JavaScript ma dużo mocy pod maską

Obsługa zdarzeń JavaScript jest potężna, porównywalna z wieloma pełnowymiarowymi językami interfejsu. Kiedy tworzysz interaktywne aplikacje internetowe, jest to ważna część twojego zestawu narzędzi. Ale jest wiele innych zaawansowanych tematów do zrozumienia. Profesjonalni programiści JavaScript mogą się wiele nauczyć!

Jeśli chcesz nauczyć się kodować JavaScript jak zawodowiec, zapoznaj się z naszym przewodnikiem po sprytnych wkładkach i przygotuj się do zachwytu podczas następnego wywiadu.

11 tekstów o JavaScript, które powinieneś znać

Osiągnij wiele za pomocą niewielkiej ilości kodu, korzystając z tej szerokiej gamy jednolinijek JavaScript.

Czytaj dalej

O autorze