Pochopenie šírenia udalostí v JavaScripte

Udalosti v JavaScripte fungujú ako upozornenia, že došlo k interakcii používateľa alebo inej akcii. Napríklad, keď kliknete na tlačidlo formulára, váš prehliadač vygeneruje udalosť, ktorá signalizuje, že sa tak stalo. Zadanie do vyhľadávacieho poľa tiež vyvoláva udalosti a takto často funguje automatické navrhovanie online.

V JavaScripte sa udalosti, ktoré zahŕňajú interakciu používateľa, zvyčajne spúšťajú proti špecifickým prvkom. Napríklad kliknutím na tlačidlo vyvoláte udalosť proti tomuto tlačidlu. Ale udalosti sa tiež šíria: strieľajú proti iným prvkom v hierarchii dokumentov.

Čítajte ďalej a dozviete sa všetko o šírení udalostí a dvoch rôznych dostupných typoch.

Čo je spracovanie udalostí v JavaScripte?

Kód JavaScript môžete použiť na zachytenie udalostí, ktoré webová stránka vyvolá, a reakciu na ne. Môžete to urobiť, ak chcete prepísať predvolené správanie alebo vykonať akciu, keď žiadne predvolené nastavenie neexistuje. Bežným príkladom je overenie formulára. Spracovanie udalostí vám umožňuje prerušiť bežný proces odosielania formulára.

Zvážte tento príklad:

Klikni na mňa

Vyššie uvedený kód má prvok tlačidla s ID s názvom button. Má prijímač udalosti kliknutia, ktorý zobrazuje upozornenie so správou Ahoj svet.

Čo je to propagácia udalostí?

Šírenie udalostí popisuje poradie, v ktorom udalosti prechádzajú cez strom DOM keď ich webový prehliadač spustí.

Predpokladajme, že vo vnútri značky div je značka formulára a obe majú prijímače udalostí onclick. Propagácia udalostí popisuje, ako sa jeden prijímač udalostí môže spustiť za druhým.

Existujú dva typy šírenia:

1. Prebublávanie udalostí, ktorými udalosti prebublávajú smerom nahor, od dieťaťa k rodičovi.
2. Zachytávanie udalostí, pomocou ktorých udalosti postupujú smerom nadol, od rodiča k dieťaťu.

Čo je prebublávanie udalostí v JavaScripte?

Bublanie udalosti znamená, že smer šírenia udalosti bude od podriadeného prvku k jeho rodičovskému prvku.

Zvážte nasledujúci príklad. Má tri vnorené prvky: div, formulár a tlačidlo. Každý prvok má a kliknite poslucháč udalostí. Prehliadač zobrazí upozorniť so správou, keď kliknete na každý prvok.

V predvolenom nastavení bude poradie, v ktorom webový prehliadač zobrazuje upozornenia, tlačidlo, formulár a potom div. Udalosti sa šíria z dieťaťa na rodiča.

 div


 formulár 



 Tlačidlo

Čo je zachytávanie udalostí?

Pri zachytávaní udalostí je poradie šírenia opakom bublania. Inak je koncept identický. Jediný rozdiel pri zachytávaní je v tom, že udalosti sa dejú od rodiča k dieťaťu. Na rozdiel od predchádzajúceho príkladu, pri zaznamenávaní udalostí prehliadač zobrazí upozornenia v tomto poradí: div, formulár a tlačidlo.

Ak chcete dosiahnuť zachytenie udalosti, musíte vykonať iba jednu zmenu v kóde. Druhým parametrom addEventListener() definuje typ šírenia. V predvolenom nastavení je nepravda, pretože predstavuje bublanie. Ak chcete povoliť zaznamenávanie udalostí, musíte nastaviť druhý parameter na hodnotu true.

 div.addEventListener("click", ()=>{
 alert("div")
 }, pravda);
 form.addEventListener("click", ()=>{
 upozornenie ("formulár")
 }, pravda);
 button.addEventListener("click", ()=>{
 upozornenie ("tlačidlo")
 }, pravda);

Ako môžete zabrániť šíreniu udalostí?

Šírenie udalostí môžete zastaviť pomocou stopPropagation() metóda. The addEventListener() akceptuje názov udalosti a funkciu obsluhy. Obslužný program berie ako parameter objekt udalosti. Tento objekt obsahuje všetky informácie o udalosti.

Keď vyvoláte stopPropagation() spôsob, udalosť sa od tohto bodu prestane šíriť. Napríklad, keď používate stopPropagation() na prvku formulára udalosti prestanú prebublávať až po prvok div. Ak kliknete na tlačidlo, uvidíte udalosti vyvolané na tlačidle a formulári, ale nie div.

form.addEventListener("click", (e)=>{
e.stopPropagation();
 upozornenie("formulár");
});

Súvisiace: The Ultimate JavaScript Cheat Sheet

JavaScript má pod kapotou veľkú silu

Spracovanie udalostí JavaScriptu je výkonné, porovnateľné s mnohými plnohodnotnými jazykmi rozhrania. Keď vyvíjate interaktívne webové aplikácie, je to dôležitá súčasť vášho balíka nástrojov. Existuje však mnoho ďalších pokročilých tém, ktorým sa treba venovať. Profesionálni vývojári JavaScriptu sa toho musia veľa naučiť!

Ak sa chcete naučiť kódovať JavaScript ako profesionál, pozrite si nášho sprievodcu šikovnými vložkami a pripravte sa, že na ďalšom rozhovore budete ohromení.

11 JavaScript One-Liners, ktoré by ste mali vedieť

Dosiahnite veľa s malým množstvom kódu pomocou tejto širokej škály jednoduchých riadkov JavaScriptu.

Prečítajte si ďalej

O autorovi