Bublání událostí a zachycování událostí jsou nejpoužívanějšími termíny v JavaScriptu v době toku událostí. Jedná se o dva způsoby šíření událostí v HTML DOM API. Tento článek o probublávání událostí a zachycování událostí v JavaScriptu podrobně popisuje, proč je vyžadujeme v následujícím pořadí:
Co je bublinkování událostí v JavaScriptu?
Bublání událostí je termín, s nímž se lidé při vývoji webové aplikace nebo webové stránky musí setkat . V zásadě je Bubbling událostí technikou, ve které jsou obslužné rutiny událostí volány, když je jedna položka vnořena do jiné položky a musí být stejné události. Je to podobné jako zapouzdření.
Fibonacciho číslo c ++
Bublání událostí je jen malá část zpracování událostí v JavaScriptu. Abychom tomu lépe porozuměli, musíme vědět o šíření událostí a o tom, jak podporuje Bubbling událostí.
Co je propagace událostí?
Šíření událostí lze porovnat jako nadřazený termín s probubláváním událostí a zachycením jako jejich podřízený.Je znázorněna takto:
Pokud kliknete na libovolný obrázek, vygeneruje se nejen událost kliknutí, ale přejde se na rodiče „a“ a dědečka „li“. Tímto způsobem dochází k šíření funkce. Zde je obrázek považován za podřízený a je to cíl události, kde je generováno kliknutí. Obrázek spolu s jeho předky společně tvoří větev ve stromové terminologii. Větev je důležitá, protože poznáváme cestu, po které se událost šíří.
Každý z posluchačů je volán s objektem události, který shromažďuje informace o události. Toto šíření je velmi důležité, protože poznáváme proces volání všech posluchačů pro danou událost. Z výše uvedeného obrázku si můžeme všimnout, že určení větve je statické. Všechny úpravy stromu, ke kterým dojde během události, jsou ignorovány. Zde je šíření obousměrné, to znamená, že jde z okna do cíle události a dostane se zpět. Zde je šíření široce kategorizováno do tří hlavních typů. Ty jsou:
- Fáze zachycení: Přechod z okna do cílové fáze události.
- Cílová fáze: Je to cílová fáze.
- Bublinová fáze: Z cílového rodiče události zpět do okna.
Co je zachycování událostí?
V této fázi jsou voláni posluchači posluchače, jejichž hodnota byla zaregistrována jako „true“. Je psán jako:
el.addEventListener ('click', listener, true)Zde byla zaregistrována hodnota posluchače jako „true“, takže je zachycena tato událost. Pokud by neexistovala žádná hodnota, byla výchozí hodnota false a událost by nebyla zachycena. Takže v této fázi si ta událost, jejíž hodnota je pravdivá, našla cestu pouze z okna a byla volána a zachycena.
Pak v cílové fázi události jsou všichni registrovaní posluchači voláni bez ohledu na jejich stav vlajky, který je pravdivý nebo nepravdivý.
Použití probublávání událostí a zachycování událostí v JavaScriptu
Ve fázi probublávání je volán pouze nezachytávač, tedy události, které mají hodnotu příznaku jako „false“. Probublávání událostí a zachycování událostí jsou v terminologii DOM (Document Object Model) velmi užitečné a důležité.
el.addEventListener ('kliknout', posluchač, false) // posluchač nezachytí el.addEventListener ('kliknout', posluchač) // posluchač nezachytíNad kusem kódu je ukázáno fungování fáze probublávání a zachycení. Ne všechny události směřují k cíli události. Některé z nich nebublují. Jejich pohyb se zastaví po cílové fázi. Průběh fáze tří událostí je znázorněn v následujícím diagramu:
Bublání událostí nefunguje u všech typů událostí, posluchač však musí vlastnit '.bublina „Booleovská vlastnost objektu události. Mezi další vlastnosti patří:
co jsou tokeny v Javě
- e. cíl: který odkazuje na cíl události.
- e.currentTarget: je to režim, ve kterém jsou registrovaní aktuální posluchači. Zde je hodnota odkazována pomocí tento klíčové slovo.
- e.eventPhase: Je to celé číslo, které odkazuje na další tři klíčová slova, jako je Capturing_phase, Bubbling_phase, AT_Target fáze.
Pracovní postup
Podívejme se blíže na výše uvedený obrázek. Klikněme na prvek „buttonOne“ a poté se okamžitě spustí událost. Událost obvykle začíná svou cestu od kořene, který je nejvyšším prvkem stromu. Poté jde za stromem cílová událost, která je „buttonOne“. Cestuje takto:
jak používat atom pro python
Jak je znázorněno na obrázku, událost prochází skrz terminologie DOM, které se nakonec dostanou k cílové události. Jakmile událost dosáhne svého cíle, nekončí. Pokračuje dál a dál v terminologiích DOM, jak je znázorněno na následujícím obrázku.
Stejně jako dříve je každý prvek na cestě události, jak se pohybuje nahoru, upozorněn na svou existenci. Jak to takto pokračuje, musíte přemýšlet, zda můžeme proces zastavit, nebo ne. Odpověď na otázku zní Ano, můžeme zastavit šíření události. To se provádí vyvoláním „StopPropagation“ metoda objektu události.
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 '))Použitím klíčového slova jsme schopni zastavit šíření. Funguje to takto, když aplikujeme klíčové slovo „ stopPropagation “ pak se nevolají všechny události v rámci hlavních událostí, a proto by se nevolaly, jak je uvedeno v části kódu výše. Existuje další klíčové slovo známé jako „ stopImmediatePropagation “. Jak název napovídá, okamžitě zastaví jednání sourozenců.
Tím jsme se dostali na konec našeho článku. Doufám, že jste pochopili, co je Event Bubbling a Event Capturing v JavaScriptu.
Nyní, když víte o probublávání událostí a zachycování událostí v JavaScriptu, podívejte se na podle Edureka. Osvědčení o školení pro vývoj webových aplikací vám pomůže Naučte se, jak vytvářet působivé webové stránky pomocí HTML5, CSS3, Twitter Bootstrap 3, jQuery a Google API a jak je nasadit do služby Amazon Simple Storage Service (S3).
Máte na nás dotaz? Uveďte to v sekci komentářů v části „Bublání událostí a zachycování událostí v JavaScriptu“ a my se vám ozveme.