Mehurjenje dogodkov in zajemanje dogodkov v JavaScript: vse, kar morate vedeti

Mehurjenje dogodkov in zajemanje dogodkov sta najpogosteje uporabljena izraza v JavaScript v času poteka dogodka. To sta dva načina širjenja dogodkov v API-ju HTML DOM. Ta članek o mehurčkih in zajemanju dogodkov v JavaScript bo podrobno opisal, zakaj jih potrebujemo v v naslednjem zaporedju:

• • • Kaj je mehurjenje dogodkov v JavaScript?
    • Kaj je razširjanje dogodkov?
    • Kaj je zajem dogodkov?
    • Uporaba mehurčkov in zajemanja dogodkov v JavaScript
    • Delovni postopek

Kaj je mehurjenje dogodkov v JavaScript?

Mehurjenje dogodkov je izraz, na katerega morajo ljudje naleteti pri razvoju spletne aplikacije ali spletne strani . V bistvu je mehurjenje dogodkov tehnika, pri kateri se obdelovalci dogodkov pokličejo, ko je en element ugnezden na drug element in mora biti istega dogodka. Podobno je kapsuliranju.

Mehurjenje dogodkov je le majhen del obdelave dogodkov v JavaScript. Da bi ga bolje razumeli, moramo vedeti o razširjanju dogodkov in kako podpira dogodke.

Kaj je razširjanje dogodkov?

Razmnoževanje dogodkov lahko primerjamo kot nadrejeni izraz z mehurčki in zajemanjem dogodkov kot njegovega otroka.Zastopan je na naslednji način:

Če kliknete katero koli sliko, ne bo le ustvaril dogodka klika, temveč nadaljuje nadrejeni 'a' in dedkov 'li'. Na ta način poteka širjenje funkcije. Tu se slika šteje za podrejeno in je cilj dogodka, kjer je klik ustvarjen. Slika skupaj s svojimi predniki skupaj tvori vejo v drevesni terminologiji. Podružnica je pomembna, saj spoznamo pot, po kateri se dogodek širi.

Vsak od poslušalcev se pokliče s predmetom dogodka, ki zbira informacije o dogodku. To širjenje je zelo pomembno, saj spoznamo postopek klicanja vseh poslušalcev za dani dogodek. Na zgornji sliki lahko opazimo, da je določitev veje statična. Vse spremembe drevesa, ki se pojavijo med dogodkom, se prezrejo. Tu je razširjanje dvosmerno, to je, da gre od okna do cilja dogodka in se vrne. Tu je razmnoževanje na splošno razdeljeno na tri glavne vrste. Tisto so:

1. Faza zajema: Od okna do ciljne faze dogodka.
2. Ciljna faza: Je ciljna faza.
3. Faza mehurčkov: Od nadrejenega cilja dogodka nazaj do okna.

Kaj je zajem dogodkov?

V tej fazi se pokličejo poslušalci zajemanja, katerih vrednost je bila registrirana kot 'resnična'. Zapisano je kot:

el.addEventListener ('klik', poslušalec, resnično)

Tu je bila vrednost poslušalca registrirana kot »resnična«, zato je ta dogodek zajet. Če ne bi bilo vrednosti, bi bila privzeto vrednost false in dogodek ne bi bil zajet. Torej se v tej fazi tisti dogodek, katerega vrednost je resnična, le odkrije od okna in ga pokličejo in zajamejo.

Nato se v ciljni fazi dogodka pokličejo vsi registrirani poslušalci, ne glede na njihovo stanje zastave, ki je resnično ali neresnično.

podatkovne strukture in algoritmi v vadnici Java

Uporaba mehurčkov in zajemanja dogodkov v JavaScript

V fazi mehurčkov se pokliče samo tisti, ki ne zajema, to so dogodki, ki imajo vrednost zastavice kot 'false'. Mehurčki dogodkov in zajemanje dogodkov so v terminologiji DOM (objektni model dokumenta) zelo koristni in pomembni.

el.addEventListener ('klik', poslušalec, napačno) // poslušalec ne zajame el.addEventListener ('klik', poslušalec) // poslušalec ne zajame

Zgornji del kode prikazuje delovanje faze mehurčkov in zajemanja. Vsi dogodki ne gredo na cilj dogodka. Nekateri se ne napihnejo. Njihovo potovanje se ustavi po ciljni fazi. Pretok faze treh dogodkov je prikazan na naslednjem diagramu:

Mehurčki dogodkov ne delujejo pri vseh vrstah dogodkov, vendar jih mora poslušalec imeti “.Mehurček ”Logična lastnost objekta dogodka. Nekatere druge lastnosti vključujejo:

1. e.cilj: ki se sklicuje na cilj dogodka.
2. e.currentTarget: to je način, v katerem so registrirani trenutni poslušalci. Tu se vrednost sklicuje z uporabo to ključna beseda.
3. e.eventPhase: To je celo število, ki se nanaša na druge tri ključne besede, kot je Faza zajemanja, Faza mehurčkov, AT_Target fazi.

Delovni postopek

Oglejmo si podrobneje zgornjo ponazoritev. Kliknimo na element „buttonOne“ in takoj se bo sprožil dogodek. Običajno dogodek začne svojo pot od korena, ki je najvišji element drevesa. Nato gre po drevesu ciljni dogodek, ki je »buttonOne«. Evo, kako potuje:

java ima-odnos

Kot je prikazano na sliki, se dogodek prebije skozi terminologije DOM, ki na koncu dosežejo ciljni dogodek. Zdaj, ko dogodek doseže svoj cilj, se ne konča. V terminologijah DOM se nadaljuje in nadaljuje, kot je prikazano na spodnji sliki.

Tako kot prej je vsak element na poti dogodka, ko gre navzgor, obveščen o svojem obstoju. Ko gre tako naprej, morate razmišljati, ali lahko postopek ustavimo ali ne. No, odgovor na vprašanje je Da, lahko ustavimo širjenje dogodka. To se naredi s klicem na “StopPropagation” metoda predmeta dogodka.

window.addEventListener ('click', e => {e.stopPropagation ()}, true) window.addEventListener ('click', listener ('c1'), true) window.addEventListener ('click', listener ('c2 '), true) window.addEventListener (' klik ', poslušalec (' b1 ')) window.addEventListener (' klik ', poslušalec (' b2 '))

Z uporabo ključne besede lahko zaustavimo širjenje. Deluje tako, ko uporabimo ključno besedo » stopPropagation ' potem vsi dogodki pod glavnimi dogodki niso poklicani in zato ne bi bili poklicani, kot je omenjeno v zgornjem delu kode. Obstaja še ena ključna beseda, znana kot „ stopImmediatePropagation '. Kot že ime pove, takoj ustavi postopek bratov in sester.

S tem smo prišli do konca našega članka. Upam, da ste razumeli, kaj je v JavaScriptu premetavanje in zajemanje dogodkov.

Zdaj, ko veste o mehurčkih in zajemanju dogodkov v JavaScript, si oglejte avtor Edureka. Izobraževanje za certificiranje spletnega razvoja vam bo pomagalo Naučiti se ustvariti impresivna spletna mesta z uporabo API-jev HTML5, CSS3, Twitter Bootstrap 3, jQuery in Google ter jih razporediti na Amazon Simple Storage Service (S3).

Imate vprašanje za nas? Prosimo, omenite ga v oddelku za komentarje v poglavju »Mehurjenje dogodkov in zajemanje dogodkov v JavaScript«, mi pa se vam bomo oglasili.