Bubbling i przechwytywanie zdarzeń w JavaScript: wszystko, co musisz wiedzieć

Event Bubbling i Event Capuring to terminy najczęściej używane w JavaScript w czasie przepływu zdarzeń. Są to dwa sposoby propagowania zdarzeń w HTML DOM API. W tym artykule na temat propagowania zdarzeń i przechwytywania zdarzeń w JavaScript szczegółowo opisano, dlaczego wymagamy ich w w następującej kolejności:

• • • Co to jest propagacja zdarzeń w JavaScript?
    • Co to jest propagacja wydarzeń?
    • Co to jest przechwytywanie zdarzeń?
    • Wykorzystanie propagacji zdarzeń i przechwytywania zdarzeń w JavaScript
    • Procedura robocza

Co to jest propagacja zdarzeń w JavaScript?

Event Bubbling to termin, z którym ludzie muszą się spotkać podczas tworzenia aplikacji internetowych lub stron internetowych przy użyciu . Zasadniczo propagacja zdarzeń to technika, w której procedury obsługi zdarzeń są wywoływane, gdy jeden element jest zagnieżdżony w innym elemencie i musi należeć do tego samego zdarzenia. Jest podobny do kapsułkowania.

Event Bubbling to tylko niewielka część obsługi zdarzeń w JavaScript. Aby lepiej to zrozumieć, musimy wiedzieć o propagowaniu zdarzeń i o tym, jak obsługuje ono propagację zdarzeń.

Co to jest propagacja wydarzeń?

Propagację zdarzeń można porównać jako termin nadrzędny z propagowaniem i przechwytywaniem zdarzeń jako jego elementem podrzędnym.Jest on przedstawiony w następujący sposób:

Kliknięcie dowolnego obrazu nie tylko wygeneruje zdarzenie kliknięcia, ale trafi do rodzica „a” i dziadka „li”. W ten sposób następuje propagacja funkcji. Tutaj obraz jest traktowany jako dziecko i jest celem zdarzenia, w którym generowane jest kliknięcie. Obraz wraz z jego przodkami tworzy gałąź w terminologii drzewiastej. Gałąź jest ważna, ponieważ poznajemy ścieżkę, po której propaguje się wydarzenie.

znalezienie największej liczby w tablicy java

Każdy z detektorów jest wywoływany odpowiednio z obiektem zdarzenia, który zbiera informacje o zdarzeniu. Ta propagacja jest bardzo ważna, ponieważ poznajemy proces wywoływania wszystkich słuchaczy dla danego zdarzenia. Na powyższym obrazku możemy zauważyć, że wyznaczenie gałęzi jest statyczne. Wszelkie modyfikacje drzewa zachodzące podczas wydarzenia są ignorowane. W tym przypadku propagacja jest dwukierunkowa, to znaczy przechodzi od okna do celu zdarzenia i wraca. W tym przypadku propagacja jest ogólnie podzielona na trzy główne typy. To są:

1. Faza przechwytywania: Przejście z okna do fazy celu zdarzenia.
2. Faza celu: To jest faza docelowa.
3. Faza bańki: Od rodzica docelowego zdarzenia z powrotem do okna.

Co to jest przechwytywanie zdarzeń?

Na tym etapie wywoływane są detektory przechwytywania, których wartość została zarejestrowana jako „prawda”. Jest napisane jako:

jak stworzyć pakiet w java

el.addEventListener ('click', listener, true)

Tutaj wartość detektora została zarejestrowana jako „prawda”, więc to zdarzenie jest przechwytywane. Gdyby nie było żadnej wartości, domyślną wartością byłaby fałsz i zdarzenie nie zostałoby przechwycone. Tak więc w tej fazie zdarzenie, którego wartość jest prawdziwa, tylko trafia do okna, zostaje wywołane i przechwycone.

Następnie w fazie celu zdarzenia wywoływane są wszystkie zarejestrowane detektory, niezależnie od ich statusu flagi, który ma wartość prawda lub fałsz.

Wykorzystanie propagacji zdarzeń i przechwytywania zdarzeń w JavaScript

W fazie propagacji wywoływany jest tylko ten, kto nie przechwytuje, czyli zdarzenia, które mają wartość flagi „fałsz”. Propagowanie zdarzeń i przechwytywanie zdarzeń są bardzo przydatne i ważne w terminologii DOM (Document Object Model).

el.addEventListener ('click', listener, false) // listener nie przechwytuje el.addEventListener ('click', listener) // listener nie przechwytuje

Powyższy fragment kodu pokazuje działanie fazy propagacji i przechwytywania. Nie wszystkie zdarzenia trafiają do celu zdarzenia. Niektórym z nich nie dochodzi. Ich podróż zatrzymuje się po fazie docelowej. Poniższy diagram ilustruje przepływ fazy trzech zdarzeń:

Propagacja zdarzeń nie działa we wszystkich typach zdarzeń, jednak słuchacz musi posiadać '.bańka ”Boolean właściwość obiektu zdarzenia. Niektóre z innych właściwości obejmują:

1. e.target: który odwołuje się do celu zdarzenia.
2. e.currentTarget: jest to tryb, w którym są zarejestrowani obecni słuchacze. Tutaj odwołuje się do wartości za pomocą to słowo kluczowe.
3. e.eventPhase: Jest to liczba całkowita odnosząca się do pozostałych trzech słów kluczowych, takich jak Capuring_phase, Bubbling_phase, AT_Target faza.

Procedura robocza

Przyjrzyjmy się bliżej powyższej ilustracji. Kliknijmy element „buttonOne”, a natychmiast zostanie wywołane zdarzenie. Zwykle wydarzenie rozpoczyna swoją podróż od korzenia, który jest najwyższym elementem drzewa. Następnie podąża za drzewem zdarzenia docelowego, które jest „buttonOne”. Oto jak podróżuje:

Jak pokazano na rysunku, zdarzenie przechodzi przez terminologię DOM, docierając na końcu do zdarzenia docelowego. Teraz, gdy wydarzenie osiągnie swój cel, nie kończy się. Trwa i trwa w ramach terminologii DOM, jak pokazano na poniższym obrazku.

Tak jak poprzednio, każdy element na ścieżce wydarzenia w miarę przesuwania się w górę jest powiadamiany o swoim istnieniu. Kiedy to się dzieje, musisz się zastanawiać, czy możemy zatrzymać ten proces, czy nie. Cóż, odpowiedź na pytanie brzmi: tak, możemy zatrzymać propagację wydarzenia. Odbywa się to poprzez wywołanie „StopPropagation” metoda obiektu zdarzenia.

różnica między html i xml

window.addEventListener ('click', e => {e.stopPropagation ()}, true) window.addEventListener ('click', listener ('c1'), true) window.addEventListener ('click', listener ('c2 '), true) window.addEventListener (' click ', listener (' b1 ')) window.addEventListener (' click ', listener (' b2 '))

Stosując słowo kluczowe jesteśmy w stanie zatrzymać propagację. Działa to tak, kiedy stosujemy słowo kluczowe „ stopPropagation ” wtedy wszystkie zdarzenia w ramach głównych wydarzeń nie są wywoływane i dlatego nie byłyby wywoływane, jak wspomniano w powyższym fragmencie kodu. Istnieje inne słowo kluczowe znane jako „ stopImmediatePropagation ”. Jak sama nazwa wskazuje, natychmiast przerywa postępowanie rodzeństwa.

W ten sposób dotarliśmy do końca naszego artykułu. Mam nadzieję, że rozumiesz, czym jest propagacja zdarzeń i przechwytywanie zdarzeń w JavaScript.

Teraz, gdy wiesz już o propagowaniu zdarzeń i przechwytywaniu zdarzeń w JavaScript, zapoznaj się z przez Edureka. Szkolenie w zakresie certyfikacji w zakresie rozwoju sieci pomoże Ci nauczyć się, jak tworzyć imponujące witryny internetowe przy użyciu HTML5, CSS3, Twitter Bootstrap 3, jQuery i interfejsów API Google oraz wdrażać je w Amazon Simple Storage Service (S3).

Masz do nas pytanie? Wspomnij o tym w sekcji komentarzy w „Bubbling Event and Event Capuring in JavaScript”, a my skontaktujemy się z Tobą.