Prebublávanie a zachytávanie udalostí sú najbežnejšie používané výrazy v JavaScripte v čase toku udalostí. Toto sú dva spôsoby šírenia udalostí v rozhraní HTML DOM API. Tento článok o prebublávaní udalostí a zachytávaní udalostí v JavaScripte podrobne popíše, prečo ich vyžadujeme v v nasledujúcom poradí:
Čo je bublinkovanie udalostí v JavaScripte?
Bubble udalostí je termín, s ktorým sa ľudia musia stretnúť pri vývoji webovej aplikácie alebo webovej stránky . Event Bubbling je v zásade technika, pri ktorej sa obslužné rutiny udalostí volajú, keď je jedna položka vnorená do inej položky a musí ísť o rovnakú udalosť. Je to podobné ako so zapuzdrením.
zlúčiť triedenie v c ++
Event Bubbling je iba malá časť spracovania udalostí v JavaScripte. Aby sme tomu lepšie porozumeli, musíme vedieť o propagácii udalostí a o tom, ako podporuje bublanie udalostí.
Čo je propagácia udalostí?
Šírenie udalostí možno porovnávať ako nadradený výraz s bublaním a zachytávaním udalostí ako ich dieťaťa.Je zastúpená takto:
Ak kliknete na ľubovoľný obrázok, vygeneruje sa nielen udalosť kliknutia, ale dôjde sa aj na rodiča „a“ a starého otca „li“. Týmto spôsobom sa šíri funkcia. Tu sa obrázok považuje za dieťa a je to cieľ udalosti, kde sa generuje kliknutie. Obrázok spolu s jeho predkami tvorí vetvu v terminológii stromov. Vetva je dôležitá, keď spoznáme cestu, po ktorej sa udalosť šíri.
Každému z poslucháčov sa zavolá objekt udalosti, ktorý zhromažďuje informácie o udalosti. Toto šírenie je veľmi dôležité, pretože poznáme proces volania všetkých poslucháčov pre danú udalosť. Z vyššie uvedeného obrázku si môžeme všimnúť, že určenie vetvy je statické. Všetky úpravy stromu, ktoré sa vyskytnú počas udalosti, sa ignorujú. Tu je šírenie obojsmerné, to znamená, že ide z okna do cieľa udalosti a vráti sa späť. Tu je šírenie všeobecne rozdelené do troch hlavných typov. Tie sú:
- Fáza snímania: Prechod z okna do cieľovej fázy udalosti.
- Cieľová fáza: Je to cieľová fáza.
- Bublinová fáza: Z cieľového rodiča udalosti späť do okna.
Čo je zachytávanie udalostí?
V tejto fáze sa volajú poslucháči, ktorých hodnota bola zaregistrovaná ako „skutočná“. Je napísaný ako:
el.addEventListener ('kliknutie', poslucháč, pravda)Tu bola zaregistrovaná hodnota poslucháča ako „pravdivá“, takže sa zachytáva táto udalosť. Ak by neexistovala žiadna hodnota, mala by predvolene hodnotu false a udalosť by sa nezachytila. Takže v tejto fáze si tá udalosť, ktorej hodnota je pravdivá, iba nájde cestu z okna a bude volaná a zachytená.
Potom v cieľovej fáze udalosti sa zavolajú všetci registrovaní poslucháči bez ohľadu na to, či sú ich príznaky správne alebo nepravdivé.
Využitie prebublávania a zachytávania udalostí v JavaScripte
Vo fáze prebublávania sa volá iba nezachytiteľ, to znamená udalosti, ktoré majú hodnotu príznaku ako „false“. Prebublávanie udalostí a zachytávanie udalostí sú v terminológii DOM (Document Object Model) veľmi užitočné a dôležité.
el.addEventListener ('kliknutie', poslucháč, nepravda) // poslucháč nezachytí el.addEventListener ('kliknutie', poslucháč) // poslucháč nezachytíNad časťou kódu je znázornené fungovanie fázy prebublávania a zachytenia. Nie všetky udalosti smerujú k cieľu udalosti. Niektoré z nich nebublinkujú. Ich jazda sa zastaví po cieľovej fáze. Tok fázy troch udalostí je znázornený na nasledujúcom diagrame:
Prebublávanie udalostí nefunguje vo všetkých druhoch udalostí, poslucháč však musí vlastniť „.Bublina ”Boolovská vlastnosť objektu udalosti. Medzi ďalšie vlastnosti patrí:
zlúčiť zoradiť c ++ pole
- e.cieľ: ktorý odkazuje na cieľ udalosti.
- e.currentTarget: je to režim, v ktorom sú zaregistrovaní súčasní poslucháči. Tu sa na hodnotu odkazuje pomocou toto kľúčové slovo.
- e.eventPhase: Je to celé číslo, ktoré odkazuje na ďalšie tri kľúčové slová, ako napr Capturing_phase, Bubbling_phase, AT_Target fáza.
Pracovný postup
Pozrime sa bližšie na vyššie uvedenú ilustráciu. Kliknime na prvok „buttonOne“ a potom sa okamžite spustí udalosť. Udalosť zvyčajne začína svoju cestu od koreňa, ktorý je najvyšším prvkom stromu. Potom pôjde za stromom cieľová udalosť, ktorá je „buttonOne“. Takto cestuje:
print_r v php
Ako je znázornené na obrázku, udalosť si razí cestu cez terminológie DOM, ktoré sa nakoniec dostanú k cieľovej udalosti. Akonáhle udalosť dosiahne svoj cieľ, nekončí. V terminológiách DOM to pokračuje ďalej a ďalej, ako je to znázornené na nasledujúcom obrázku.
Rovnako ako predtým, každý prvok na ceste udalosti, ktorá sa posúva hore, dostane upozornenie na svoju existenciu. Keď to takto pôjde ďalej, musíte premýšľať, či môžeme proces zastaviť alebo nie. Odpoveď na otázku znie Áno, môžeme zastaviť šírenie udalosti. To sa deje vyvolaním súboru „StopPropagation“ metóda objektu udalosti.
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 kľúčového slova dokážeme zastaviť šírenie. Funguje to takto, keď aplikujeme kľúčové slovo „ stopPropagation “ potom sa nebudú volať všetky udalosti v rámci hlavných udalostí, a preto by sa nevolali, ako je uvedené v časti kódu vyššie. Existuje ďalšie kľúčové slovo známe ako „ stopImmediatePropagation “. Ako už názov napovedá, okamžite zastaví konanie súrodencov.
Týmto sme sa dostali na koniec nášho článku. Dúfam, že ste pochopili, čo je Bubble udalostí a zachytávanie udalostí v JavaScripte.
Teraz, keď viete o prebublávaní udalostí a zachytávaní udalostí v JavaScripte, pozrite sa na od Edureka. Osvedčenie o školení v oblasti vývoja webu vám pomôže Naučte sa, ako vytvárať pôsobivé webové stránky pomocou rozhraní HTML5, CSS3, Twitter Bootstrap 3, jQuery a Google API a ako ich nasadiť do služby Amazon Simple Storage Service (S3).
Máte na nás otázku? Uveďte to v sekcii komentárov v časti „Bublanie udalostí a zachytávanie udalostí v JavaScripte“ a my sa vám ozveme.