Bublající událost - Event bubbling

Bublající událost je typ šíření událostí^[1] kde se událost nejprve spustí na nejvnitřnějším cílovém prvku a poté se postupně spustí na předky (rodiče) cílového prvku ve stejné hierarchii vnoření, dokud nedosáhne nejvzdálenějšího DOM prvek nebo objekt dokumentu^[2] (Pokud je obslužná rutina inicializována). Je to jeden způsob, jak se události zpracovávají v prohlížeči. Události jsou akce prováděné uživatelem, například kliknutí na tlačítko, změna pole atd. Obslužné rutiny událostí se používají ke spuštění kódu, když dojde k určitému druhu události uživatelského rozhraní, například když kliknete na tlačítko nebo když se webová stránka načte.

Přehled

Zvažte strukturu DOM, kde jsou vnořené 3 prvky v následujícím pořadí: Element 1 (Div), Element 2 (Span), Element 3 (Button), jejichž obslužnými rutinami po kliknutí jsou handler1 (), handler2 () a handler3 () .

Jak probublávání událostí funguje ve struktuře DOM

<div id="Element1" onclick="handler1()">   <span id="Element2" onclick="handler2()">      <input type="button" id="Element3" onclick="handler3()"/>    </span>  </div>  

Když kliknete na tlačítko Element3, nejprve se spustí obslužná rutina události pro Element 3, poté se bublina události zvedne a zavolá se obslužná rutina pro okamžitý nadřazený prvek - Element 2, následovaný obslužnou rutinou pro Element 1 atd., Dokud nedosáhne nejvzdálenějšího DOM živel.

Pořadí zpracování události: handler3 () -> handler2 () -> handler1 ()

Nejvnitřnější prvek, ze kterého se událost spouští, se nazývá cílový prvek.^[3] Většina prohlížečů považuje bublání událostí za výchozí způsob šíření událostí. Existuje však jiný přístup k šíření událostí známý jako Zachycování událostí,^[4] což je přímý protiklad probublávání událostí, kde zpracování událostí začíná od nejvzdálenějšího prvku (nebo dokumentu) struktury DOM a jde až k cílovému prvku, přičemž obslužný program cílového prvku se spustí jako poslední v pořadí.

Implementace

Všechny obslužné rutiny událostí považují bublání událostí za výchozí způsob zpracování událostí. Uživatel však může ručně vybrat způsob šíření zadáním jako posledního parametru v addEventListener () ^[5] libovolného prvku v JavaScriptu.

addEventListener ("typ", "posluchač", "CaptureMode")

Pokud je CaptureMode False, bude událost zpracována pomocí probublávání událostí.

Pokud je CaptureMode True, událost bude zpracována pomocí zachycení události.

Pokud uživatel nezadá žádnou hodnotu argumentu CaptureMode, pak je ve výchozím nastavení považován za probublávání událostí. Většina prohlížečů podporuje jak probublávání událostí, tak zachycování událostí (kromě IE <9 a Opera <7.0, které nepodporují zachycování událostí).^[1]

JavaScript také poskytuje vlastnost události nazvanou bubliny zkontrolovat, zda událost probublává nebo ne. Vrací booleovskou hodnotu True nebo False v závislosti na tom, zda událost může proběhnout na nadřazené prvky ve struktuře DOM nebo ne.

var isBubblePossible = event.bubbles;

isBubblePossible: Je pravda, že pokud událost může proběhnout až k předkům

isBubblePossible: False, pokud událost nemůže probublávat^[6]

Využití bublinkování událostí

Ke zpracování případů, kdy má jedna událost více než jednu obslužnou rutinu, lze implementovat koncept probublávání událostí. Hlavní použití probublávání událostí je registrace výchozích funkcí přítomných v programu. V poslední době používá mnoho vývojářů zejména zachycování nebo bublání událostí. Není nutné implementovat probublávání událostí; pro uživatele může být komplikované sledovat akce prováděné kvůli události.^[1]

Zabránění probublávání událostí

Někdy je užitečné zastavit jeden spouštěč na jednom prvku, což vede k více spouštěčům na předcích. JavaScript poskytuje následující metody, jak zabránit probublávání událostí:

1) stopPropagation (): Tato metoda zastaví další šíření jakékoli konkrétní události na její rodiče a vyvolá pouze obslužnou rutinu události cílového prvku. Ačkoli podporován všemi Prohlížeče kompatibilní s W3C „Internet Explorer pod verzí 9 vyžaduje historický alias cancelBubble,^[7] jako v:

event.cancelBubble = true;

Pro všechny prohlížeče kompatibilní s W3C:

event.stopPropagation ();

2) stopImmediatePropagation (): Tato metoda nejen zastaví další šíření, ale také zastaví provádění jakékoli jiné obslužné rutiny cílové události. V DOM může mít stejná událost několik nezávislých obslužných rutin, takže zastavení provádění jedné obslužné rutiny události obecně neovlivní ostatní obslužné rutiny stejného cíle. Metoda stopImmediatePropagation () ale brání provedení jakékoli jiné obslužné rutiny stejného cíle.^[7]

Pro všechny prohlížeče kompatibilní s W3C:

event.stopImmediatePropagation ();

Dalším způsobem, jak zastavit probublávání událostí, je zrušit samotnou událost, což však také zabrání provedení obslužné rutiny cíle.

Viz také

• Události DOM

Reference