Události prohlížeče jsou klíčovým aspektem interakce uživatelů s webovými stránkami. Umožňují reagovat na různé akce uživatele, jako jsou kliknutí, najetí kurzorem, načítání stránky atd. Abyste však plně pochopili, jak browser události fungují, musíte pochopit jejich životní cyklus a počet fází, kterými událost prochází.
Životní cyklus události prohlížeče se obvykle skládá ze tří hlavních fází: zachycení (capture), cíl (target) a vyskakování (bubbling). Když dojde k události, musí projít těmito fázemi, aby byla plně zpracována. V každé fázi jsou zpracovatelé událostí povoláni v určitém pořadí, aby poskytli příležitost dozvědět se o události a komunikovat s ní.
Fáze zachycení začíná horním prvkem v hierarchii DOM a pohybuje se po dřevě až k nejhlubšímu vnořenému prvku. V této fázi lze událost zachytit na některém z prvků stromu. Poté přichází fáze cíle, kdy událost dosáhne prvku přímo souvisejícího s událostí.
Po absolvování fáze cíle začíná fáze vyskakování, ve které se událost pohybuje v hierarchii DOM, až po kořenový prvek dokumentu. Zachycení a vyskakování vám umožní implementovat komplexní logiku zpracování událostí a manipulovat s prvky na stránce během procházení události různými úrovněmi přílohy DOM.
Životní cyklus prohlížečové události
V životním cyklu události prohlížeče lze rozlišit čtyři hlavní fáze: zachycení (capture), cíl (target), vyskakování (bubbling) a zpracování události.
Ve fázi zachycení se událost začíná šířit od nejvyššího prvku nadřazené struktury k cílovému prvku. Během této doby mohou být psovody událostí vyvolány na každém prvku a postupovat dolů po stromu prvků.
Fáze cíle nastává, když událost dosáhne cílového prvku, na kterém byla iniciována. Zde jsou povoláni psovodi, kteří jsou s touto událostí spojeni. Tato fáze je vrcholem životního cyklu události.
Fáze vyskakování začíná po provedení obslužných rutin cíle a dochází k zpětnému šíření události z cílového prvku do horního prvku nadřazené struktury. Zpracovatelé událostí na každém prvku vyskakují nahoru po stromu prvků, dokud nedosáhnou kořenového prvku nebo nebude vyvolána metoda zastavení vyskakování (stopPropagation()).
V konečné fázi zpracování události jsou povolány všechny zbývající obslužné rutiny, které nebyly způsobeny v předchozích fázích. Obvykle se jedná o globální zpracovatele událostí nebo obslužné rutiny nainstalované samotným prohlížečem.
| Fáze | Popis |
| Zachycení (Capture) | Šíření události z horního prvku na cílový prvek. |
| Cíl (Cíl) | Výzva zpracovatelů souvisejících s cílovým prvkem. |
| Pop-Up (Bubbling) | Zpětné šíření události z cílového prvku do horního prvku. |
| Zpracování události | Přivolání zbývajících psovodů událostí. |
Pochopení životního cyklu události prohlížeče umožňuje vývojářům přesně sledovat a spravovat zpracování událostí ve webové aplikaci, optimalizovat její výkon a předcházet možným problémům souvisejícím s pořadím provádění obslužných rutin událostí na různých prvcích stránky.
Fáze životního cyklu
Životní cyklus prohlížečové události se skládá ze tří fází: zachycení, cíl a šíření. Každá z těchto fází má své vlastní vlastnosti a provádí se v určitém pořadí, což vývojářům umožňuje spravovat události a spouštět kód.
- Fáze zachycení: V této fázi prohlížeč zachytí událost a určí, na jakém prvku k ní došlo. Prohlížeč začíná horní položkou a klesá dolů v hierarchii DOM a kontroluje každý prvek na obslužné rutiny událostí.
- Fáze cíle: Po určení položky, na které se událost stala, prohlížeč přejde do fáze cíle. V této fázi se událost dostane k cílovému prvku a spustí se obslužná rutina události spojená s tímto prvkem. Pokud cílová položka nemá obslužnou rutinu, událost přejde do další fáze.
- Fáze šíření: Pokud událost nebyla zpracována na cílovém prvku, přejde do fáze šíření. V této fázi, událost začíná vzestupnou cestu v hierarchii DOM spuštěním obslužných rutin událostí na každém mezilehlém prvku. Tento proces se nazývá vyskakování události.
Znalost fází životního cyklu události prohlížeče pomáhá vývojářům správně spravovat události a vytvářet efektivnější webové aplikace. Při práci s událostmi je třeba vzít v úvahu pořadí fází a použít vhodné psovody pro různé situace.
Fáze inicializace
Během fáze inicializace prohlížeč prochází strom DOM (Document Object Model) a určuje, které prvky se na události podílejí. Prohlížeč poté zkontroluje každou zúčastněnou položku a nastaví možnosti, jako je target (Cílová položka), typ (typ události) a event listeners (obslužná rutina události).
Kromě toho prohlížeč během Inicializační fáze vypočítá souřadnice události vzhledem k oknu nebo prvku a identifikuje další vlastnosti události, které mohou být důležité pro zpracování události.
Fáze inicializace je důležitou fází, protože zde prohlížeč nastavuje všechny potřebné parametry pro správné zpracování události. Pokud je inicializační fáze vynechána nebo provedena nesprávně, mohou se při zpracování událostí objevit různé chyby nebo nesprávné výsledky.
Fáze zachycení
Během fáze zachycení lze použít metody addEventListener() nebo attachEvent() Chcete-li propojit zpracovatele událostí s prvky DOM. V tomto případě bude psovod připoutaný ve fázi zachycení spuštěn dříve než psovodi v dalších fázích.
Fáze zachycení je užitečná, když je třeba zasáhnout vložené prvky, než se událost dostane k jejich vlastním zpracovatelům událostí. Například v případě kliknutí na vnořené tlačítko uvnitř kontejneru lze pomocí fáze zachycení nejprve zpracovat událost na samotném kontejneru a poté již na tlačítku.
Fáze zachycení
Ve fázi zachycení jsou psovody událostí vyvolány v pořadí obráceném hierarchii prvků. To znamená, že obslužná rutina události pro nadřazenou položku bude předvolána před obslužnou rutinou události pro její podřízenou položku. Taková struktura umožňuje včas zachytit událost na horní úrovni a podniknout příslušné kroky, než událost dosáhne cílového prvku.
Během fáze zachycení mohou zpracovatelé událostí použít metody event.stopPropagation () a event.preventDefault () k zastavení dalšího šíření události nebo zrušení jejího standardního chování. To umožňuje sledovat zpracování událostí na různých úrovních a předcházet nežádoucím účinkům.
Je však třeba poznamenat, že fáze zachycení se ne vždy používá v praxi vývoje webových stránek. Ve většině případů vývojáři pracují s fází vzestupného šíření (bubble phase), která následuje bezprostředně po fázi zachycení a obvykle se používá ke zpracování událostí na nižší úrovni hierarchie prvků.
Celkově je fáze zachycení důležitou fází v životním cyklu události prohlížeče, která poskytuje možnost sledovat a zpracovávat události na různých úrovních hierarchie prvků a předcházet nežádoucím činnostem.
Fáze zpracování
Fáze zpracování se skládá ze tří fází:
1. Fáze snímání (Capture)
V této fázi událost začíná svou cestu z kořenového prvku a pohybuje se v hierarchii stromu DOM, přechází z rodičovských prvků na podřízené. Během zachycení může být událost zachycena a zpracována na každém prvku, počínaje kořenovým. To umožňuje obecnější a univerzálnější zpracování událostí.
2. Cílová fáze (Target)
Jakmile událost dosáhne cílového prvku (toho prvku, na kterém byla událost iniciována), prochází cílovou fází. V této fázi jsou zpracovatelé vázáni na cílový prvek. To vám umožní přizpůsobit chování prvku v reakci na událost.
3. Fáze vyskakování (Bubble)
Po cílové fázi se událost začne pohybovat zpět v hierarchii stromu DOM, od podřízených prvků k rodičovským. Během vyskakování mohou být události zachyceny a zpracovány na každém prvku podle potřeby. To umožňuje vytvářet hierarchické struktury zpracování událostí a umožňuje provádět akce na úrovni nadřazených prvků.
Použití fází zpracování umožňuje efektivní správu zpracování událostí a provádění nezbytných činností v různých fázích životního cyklu událostí prohlížeče.
Fáze šíření
V této fázi se událost začíná šířit od nejvyššího prvku dokumentu (obvykle je to prvek ) k nejnižšímu prvku (obvykle je to prvek), v pořadí přílohy. To znamená, že událost prochází každým prvkem dokumentu, dokud nedosáhne cílového prvku, na kterém se stala.
Během této fáze lze použít metody jako e.stopPropagation() a e.stopImmediatePropagation () k zastavení dalšího šíření události nebo k zabránění vyvolání dalších obslužných rutin událostí na aktuálním prvku.
Fáze šíření je také známá jako" fáze zachycení "nebo"fáze ponoření". V této fázi budou obslužné rutiny přidané pomocí metody addEventListener () s parametrem usecapture rovným true vyvolány na každém prvku dokumentu cestou šíření události.
Níže uvedená tabulka poskytuje základní metody, které lze použít během fáze šíření:
| Metoda | Popis |
|---|---|
| e.stopPropagation() | Zastaví další šíření události |
| e.stopImmediatePropagation() | Zastaví další šíření události a zabrání tomu, aby na aktuálním prvku volali další zpracovatelé událostí |
Fáze cíle
Pokud dojde k události, prohlížeč prochází Dom stromem od kořenového prvku k cílovému prvku, aby určil, který prvek událost způsobil. K tomu dochází pomocí mechanismu vyskakování a zachycování událostí.
Ve fázi cíle je událost nejprve zpracována na samotném cílovém prvku, poté se přesune na jeho nadřazené prvky a pokračuje v hierarchii až k kořenovému prvku.
V této fázi lze použít metody související s cílovým prvkem, jako je změna jeho vlastností nebo aplikace stylů. Lze také upravit nebo zabránit dalšímu zpracování události v jiných fázích.
Fáze cíle je velmi důležitá, protože umožňuje identifikovat a pracovat s prvkem, který událost způsobil, a řídit její chování a interakci s uživatelem.
Fáze přehrávání
V této fázi událost začíná prvkem, na kterém se stala, a poté se vynoří nahoru po DOM stromu, což ovlivňuje každý prvek v cestě.
Během této fáze lze použít metody event.stopPropagation () a event.preventDefault (), aby se zabránilo dalšímu vyskakování události a zrušení její výchozí akce.
Fáze přehrávání je užitečná, pokud chcete zpracovat událost, když se dostane k určité položce, a zabránit jejímu vyskakování nebo provést výchozí akci.