Bulgotanie wydarzeń lub przechwytywanie wydarzeń w JavaScript

Kiedy zdarzenie nastąpi, propagacja zdarzeń określa kolejność elementu do wykonania zdarzeń. W modelu Object Document HTML (DOM) istnieją dwie metody propagacji zdarzeń: bulgotanie zdarzeń i przechwytywanie zdarzeń. W przypadku bulgotania zdarzenia związane z najskrytszym lub elementem dziecka jest najpierw przetwarzane. W przeciwieństwie do przechwytywania zdarzenia, zdarzenie związane z zewnętrznym lub elementem rodzica jest obsługiwane, a następnie kontrola przepływu zdarzenia zbliża się do elementu dziecka krok po kroku.

W tym spisie omówi bulgotanie wydarzeń JavaScript i przechwytywanie wydarzeń. Ponadto przykłady związane z bulgotaniem zdarzeń i przechwytywaniem zdarzeń zostaną wykazane w tym artykule. A więc zacznijmy!

Bulgotanie zdarzeń w JavaScript

W JavaScript bulgotanie zdarzeń jest wydarzeniem, które podnosi się od celu lub najbardziej wewnętrznych elementów do rodziców, a następnie podąża za dnem do górnego podejścia i przenosi przepływ kontroli zdarzeń do jego przodków. Bulgotanie zdarzeń jest uważane za domyślną metodę przepływu zdarzeń we wszystkich nowoczesnych przeglądarkach.

Przykład: bulgotanie zdarzeń w JavaScript

W poniższym przykładzie dodaliśmy tytuł z tagiem, element div z identyfikatorem „Parenement” i jego zagnieżdżony element przycisku dziecięcego mający identyfikator „ChildElement”:

Dziecko

Po pobraniu utworzonych elementów HTML za pomocą "dokument.querySelelect () ” Metoda, dodamy słuchacza zdarzeń do zarówno Div „Parenement” i jego zagnieżdżony przycisk „ChildElement”. Funkcja przeszła w „AddEventListener ()” wyświetli dodany ciąg w "konsola.dziennik()" metoda:

Wykonaj powyższy program w swoim ulubionym edytorze kodu lub dowolnej piaskownicy kodowania online; Jednak w tym celu wykorzystamy JSBin:

Teraz klikniemy "Dziecko" przycisk, który można zobaczyć na następujących wyjściach:

Klikając "Dziecko" przycisk, przekazanie "funkcjonować()" W metodzie addEventListener () zostanie wykonana. A później "na kliknięcie()" Metoda „Div” Element zostanie wywołany. Dzieje się to z powodu „Bulgotanie wydarzeń”:

W powyższym przykładzie, kiedy kliknęliśmy "Dziecko" przycisk "Kliknij" zdarzenie jest przekazywane z przycisku o identyfikatorze „ChildElement” a kontrola przepływu zdarzeń przesuwa się do "dokument" W następnej kolejności:

Jak zatrzymać bulgotanie zdarzeń w JavaScript

Używając "wydarzenie.stoppropagation () ” Metoda, możesz łatwo zatrzymać bulgotanie zdarzeń w programie JavaScript, a to zatrzymuje podróż wydarzenia od dołu do góry.

Przykład: Zatrzymaj bulgotanie zdarzeń w JavaScript

W poniższym przykładzie dodamy "wydarzenie.stoppropagation () ” metoda do "na kliknięcie()" zdarzenie utworzonego przycisku mającego identyfikator „ChildElement”. W rezultacie interpreter JavaScript nie przekazuje zdarzenia do najbardziej zewnętrznego elementu „Dokument”:

Dziecko

Kliknięcie podświetlonego przycisku tylko wydrukuje „Kliknięte dziecko” A potem powstrzymuje to wydarzenie przed bulgotaniem:

Wydarzenie zdarzenia w JavaScript

Proces, w którym zdarzenie jest przechwytywane, gdy przepływ kontroli przesuwa się z górnego elementu do elementu docelowego, jest znany jako przechwytywanie zdarzeń. Chociaż współczesne przeglądarki nie mają możliwości domyślnie włączania zdarzeń, możesz wykonać tę operację za pomocą kodu JavaScript.

Przykład: zdarzenie przechwytywania w JavaScript

Przede wszystkim w naszym programie JavaScript dodamy tytuł i „Div” element mający identyfikator „Parenement” i jego dziecięcy element z „ChildElement” ID:

Dziecko

Następnie wywołamy "dokument.querySelelect () ” Metoda zdobycia elementu rodzica i dziecka:

Następujące "Dziecko" przycisk najpierw wywoła zdarzenie dodane do elementu nadrzędnego. Następnie wykonuje zdarzenie dołączone do celu:

W powyższym przykładzie, kiedy kliknęliśmy "Dziecko" przycisk "Kliknij" zdarzenie jest przekazywane z elementu nadrzędnego, który jest „dokumentem” do określonego celu zdarzenia „ChildElement” przycisk:

Jak zatrzymać zdarzenie przechwytywania w JavaScript

Aby zatrzymać przechwytywanie zdarzeń, możesz skorzystać z "wydarzenie.stoppropagation () ” metoda. Różnica między zatrzymaniem zdarzenia, a bulgotaniem wydarzeń polega na tym, że w imprezie bulgotanie dołączyliśmy „wydarzenie.Metoda stoppropagation () ”z wydarzeniem związanym z elementem dziecka, podczas gdy w wydarzeniu zdarzenie, wydarzenie.Metoda stoppropagation () jest dodawana w wydarzeniu nadrzędnym.

Wykonaj poniższy przykład, aby wiedzieć, jak zatrzymać przechwytywanie zdarzeń za pomocą kodu JavaScript:

Dziecko

Dane wyjście oznacza, że ​​przechwytywanie zdarzeń jest zatrzymane po wykonaniu zdarzenia związanego z elementem nadrzędnym:

Oto pełny widok przepływu zdarzenia z fazami przechwytywania wydarzeń i bulgotania zdarzeń:

Wniosek

W JavaScript bulgotanie zdarzeń i przechwytywanie zdarzeń są najważniejszymi pojęciami w odniesieniu do propagacji zdarzeń. W HTML DOM wydarzenie, które uchwycanie wydarzeń odnosi się do propagacji wydarzeń z elementów przodków do ich dziecka. W imprezie bulgotanie przepływ kontroli zdarzeń przesuwa się z elementów dziecięcych do przodków. W tym spisie omówiono bulgotanie wydarzeń JavaScript i przechwytywanie wydarzeń. Ponadto przykłady związane z bulgotaniem zdarzeń i przechwytywaniem zdarzeń są również pokazane w tym artykule.