Bulgotanie zdarzeń
Bąbelkowanie zdarzeń to rodzaj propagacji zdarzenia DOM , w którym zdarzenie jest najpierw wyzwalane w najbardziej wewnętrznym elemencie docelowym, a następnie kolejno w przodkach (rodzicach) elementu docelowego w tej samej hierarchii zagnieżdżenia, aż dotrze do najbardziej zewnętrznego elementu DOM lub obiektu dokumentu ( Pod warunkiem, że program obsługi jest zainicjowany). Jest to jeden ze sposobów obsługi zdarzeń w przeglądarce. Zdarzenia to działania wykonywane przez użytkownika, takie jak kliknięcie przycisku, zmiana pola itp. Programy obsługi zdarzeń służą do wykonywania kodu, gdy wystąpi określony rodzaj zdarzenia interfejsu użytkownika, na przykład kliknięcie przycisku lub zakończenie ładowania strony internetowej .
Przegląd
Rozważmy strukturę DOM, w której znajdują się 3 elementy zagnieżdżone w następującej kolejności: Element 1 (Div), Element 2 (Span), Element 3 (Button), którego moduły obsługi kliknięcia to odpowiednio handler1(), handler2() i handler3() .
<div id="Element1" onclick="handler1()">
<span id="Element2" onclick="handler2()">
<input type="button" id="Element3" onclick="handler3()"/>
</span>
</div>
Po kliknięciu przycisku Element3 najpierw uruchamiana jest procedura obsługi zdarzenia dla elementu 3, następnie zdarzenie pojawia się w bąbelkach i wywoływana jest procedura obsługi elementu bezpośrednio nadrzędnego - elementu 2, a następnie procedura obsługi elementu 1 i tak dalej, aż dotrze do najbardziej zewnętrznego DOM element.
Kolejność obsługi zdarzeń: handler3() -> handler2() -> handler1()
Najbardziej wewnętrzny element, z którego wyzwalane jest zdarzenie, nazywany jest elementem docelowym. Większość przeglądarek traktuje bąbelkowanie zdarzeń jako domyślny sposób propagacji zdarzeń. Istnieje jednak inne podejście do propagacji zdarzeń, znane jako przechwytywanie zdarzeń , które jest bezpośrednim przeciwieństwem propagacji zdarzeń, w którym obsługa zdarzeń rozpoczyna się od najbardziej zewnętrznego elementu (lub dokumentu) struktury DOM i przechodzi aż do elementu docelowego, wykonując procedura obsługi elementu docelowego jest ostatnia w kolejności.
Realizacja
Wszystkie procedury obsługi zdarzeń traktują propagowanie zdarzeń jako domyślny sposób obsługi zdarzeń. Ale użytkownik może ręcznie wybrać sposób propagacji, określając to jako ostatni parametr w addEventListener() dowolnego elementu w JavaScript.
addEventListener("typ", "Odbiornik", "Tryb przechwytywania")
Jeśli CaptureMode ma wartość False, zdarzenie zostanie obsłużone przy użyciu propagacji zdarzeń.
Jeśli CaptureMode ma wartość True, zdarzenie zostanie obsłużone przy użyciu przechwytywania zdarzeń.
Jeśli użytkownik nie określi żadnej wartości argumentu CaptureMode, to domyślnie jest to traktowane jako bąbelkowanie zdarzenia. Większość przeglądarek obsługuje zarówno propagowanie zdarzeń, jak i przechwytywanie zdarzeń (z wyjątkiem IE <9 i Opery <7.0, które nie obsługują przechwytywania zdarzeń).
JavaScript udostępnia również właściwość zdarzenia o nazwie bubbles , która pozwala sprawdzić, czy zdarzenie jest bąbelkowe, czy nie. Zwraca wartość logiczną True lub False, w zależności od tego, czy zdarzenie może bąbelkować do elementów nadrzędnych w strukturze DOM, czy nie.
var isBubblePossible = zdarzenie.bąbelki;
isBubblePossible : True, jeśli zdarzenie może bąbelkować do przodków
isBubblePossible : False, jeśli zdarzenie nie może się bąbelkować
Wykorzystanie propagacji zdarzeń
Aby obsłużyć przypadki, w których jedno zdarzenie ma więcej niż jedną obsługę, można zaimplementować koncepcję propagacji zdarzeń. Głównym zastosowaniem bąbelkowania zdarzeń jest rejestracja domyślnych funkcji obecnych w programie. W ostatnim czasie niewielu programistów używa w szczególności przechwytywania zdarzeń lub propagacji. Implementacja propagacji zdarzeń nie jest konieczna; śledzenie działań wykonywanych z powodu zdarzenia może być dla użytkowników skomplikowane.
Zapobieganie propagacji zdarzeń
Czasami przydatne jest zatrzymanie pojedynczego wyzwalacza na jednym elemencie, co prowadzi do wielu wyzwalaczy na przodkach. JavaScript zapewnia następujące metody zapobiegania propagacji zdarzeń:
1) stopPropagation() : Ta metoda zatrzymuje dalsze propagowanie określonego zdarzenia do jego rodziców, wywołując tylko procedurę obsługi zdarzenia elementu docelowego. Chociaż jest obsługiwany przez wszystkie przeglądarki zgodne z W3C, Internet Explorer w wersji poniżej 9 wymaga historycznego aliasu cancelBubble , jak w:
event.cancelBubble = prawda;
Dla wszystkich przeglądarek zgodnych z W3C:
zdarzenie.stopPropagacja();
2) stopImmediatePropagation() : Ta metoda nie tylko zatrzymuje dalszą propagację, ale także zatrzymuje wykonywanie innych programów obsługi zdarzenia docelowego. W modelu DOM to samo zdarzenie może mieć wiele niezależnych procedur obsługi, więc zatrzymanie wykonywania jednej procedury obsługi zdarzenia generalnie nie wpływa na inne procedury obsługi tego samego celu. Ale metoda stopImmediatePropagation() zapobiega wykonaniu jakiejkolwiek innej procedury obsługi tego samego celu.
Dla wszystkich przeglądarek zgodnych z W3C:
event.stopImmediatePropagation();
Innym podejściem do zatrzymania propagacji zdarzeń jest anulowanie samego zdarzenia, jednak uniemożliwia to również wykonanie docelowej procedury obsługi.