Tapahtumakuplat ja tapahtumien sieppaaminen ovat JavaScriptissä eniten käytettyjä termejä tapahtumien kulun aikaan. Nämä ovat kaksi tapaa levittää tapahtumia HTML DOM -sovellusliittymässä. Tässä artikkelissa tapahtumien kuplittamisesta ja tapahtumien sieppaamisesta Javascriptissa kuvataan yksityiskohtaisesti, miksi tarvitsemme niitä seuraavassa järjestyksessä:
Mikä on tapahtumakuplat JavaScriptissä?
Tapahtumakuplinta on termi, jonka ihmisten on kohdattava kehittäessään verkkosovellusta tai verkkosivua . Pohjimmiltaan Tapahtumakuplinta on tekniikka, jossa tapahtumankäsittelijöitä kutsutaan, kun yksi kohde on sisäkkäin toiseen kohteeseen ja sen on oltava samasta tapahtumasta. Se on samanlainen kuin kapselointi.
Tapahtumakuplat ovat vain pieni osa tapahtumien käsittelyä JavaScript-muodossa. Ymmärtääksemme sen paremmin meidän on tiedettävä tapahtumien levittäminen ja miten se tukee tapahtumakuplintaa.
Mikä on tapahtumien levittäminen?
Tapahtuman levittämistä voidaan verrata vanhempana terminä tapahtuman kuplittamiseen ja kaappaamiseen lapsena.Se on esitetty seuraavasti:
Jos napsautat mitä tahansa kuvaa, se ei vain luo napsautustapahtumaa, vaan se jatkuu vanhemmalle 'a' ja isoisälle 'li'. Tällä tavalla toiminnan eteneminen tapahtuu. Tässä kuvaa pidetään lapsena ja napsautus syntyy tapahtumakohteena. Kuva yhdessä esi-isiensä kanssa muodostaa haaran puun terminologiassa. Haara on tärkeä, kun opimme tuntemaan polun, jota pitkin tapahtuma etenee.
system.exit (1) java
Jokainen kuuntelija kutsutaan tapahtumaobjektilla, joka kerää tietoa tapahtumasta. Tämä eteneminen on erittäin tärkeää, kun tutustumme prosessiin, jossa kaikki kuuntelijat kutsutaan tiettyyn tapahtumaan. Yllä olevasta kuvasta voimme huomata, että haaran määritys on staattinen. Tapahtuman aikana tapahtuvat puumuutokset ohitetaan. Täällä eteneminen on kaksisuuntainen eli se siirtyy ikkunasta tapahtumakohteeseen ja palaa takaisin. Täällä eteneminen on luokiteltu laajasti kolmeen päätyyppiin. Nuo ovat:
- Sieppausvaihe: Siirtyminen ikkunasta tapahtuman kohdevaiheeseen.
- Kohdevaihe: Se on kohdevaihe.
- Kuplavaihe: Tapahtumakohteesta vanhemmalle takaisin ikkunaan.
Mitä tapahtumien sieppaaminen on?
Tässä vaiheessa kapteeni kuuntelijoille kutsutaan, joiden arvo on rekisteröity 'tosi'. Se on kirjoitettu nimellä:
miten luoda joukko objekteja Java
el.addEventListener (napsauta, kuuntelija, tosi)
Täällä kuuntelijan arvo on rekisteröity todeksi, joten tätä tapahtumaa kaapataan. Jos arvoa ei olisi, arvo oletusarvoisesti oli väärä ja tapahtumaa ei siepattu. Joten tässä vaiheessa tapahtuma, jonka arvo on totta, löytää tiensä vain ikkunasta ja saa kutsun ja kaappauksen.
Sitten tapahtumakohteen vaiheessa kaikki rekisteröidyt kuuntelijat kutsutaan riippumatta heidän lipunsa tilasta, joka on tosi tai väärä.
Tapahtumakuplinnan ja tapahtumien sieppauksen käyttö JavaScript-muodossa
Bubbling-vaiheessa kutsutaan vain ei-sieppaaja, eli tapahtumat, joiden lippuarvo on 'väärä'. Tapahtumien kupliminen ja tapahtumien sieppaaminen ovat erittäin hyödyllisiä ja tärkeitä DOM (Document Object Model) -terminologiassa.
el.addEventListener ('napsauta', kuuntelija, väärä) // kuuntelija ei sieppaa el.addEventListener ('napsauta', kuuntelija) // kuuntelija ei sieppaaYllä oleva koodinpala näyttää kuplivan ja sieppaavan vaiheen toiminnan. Kaikki tapahtumat eivät mene tapahtumakohteeseen. Jotkut heistä eivät kupli. Heidän matka pysähtyy kohdevaiheen jälkeen. Kolmen tapahtuman vaihevirta on kuvattu seuraavassa kaaviossa:
Tapahtuman kupliminen ei toimi kaikentyyppisissä tapahtumissa, mutta kuulijan on oltava hallussaan '.kupla ”Tapahtumakohteen Boolen-ominaisuus. Joitakin muita ominaisuuksia ovat:
- e.kohde: joka viittaa tapahtumakohteeseen.
- e.currentTarget: se on tila, johon nykyiset kuuntelijat ovat rekisteröityneet. Tässä arvoon viitataan käyttämällä Tämä avainsana.
- e.eventPhase: Se on kokonaisluku, joka viittaa kolmeen muuhun avainsanaan, kuten Sieppauksen_vaihe, kuplinnan_vaihe, AT_Target vaihe.
Työskentelymenettely
Katsotaanpa tarkemmin yllä olevassa kuvassa. Napsautetaan ”buttonOne” -elementtiä ja sitten tapahtuma käynnistetään välittömästi. Normaalisti tapahtuma alkaa matkansa juuresta, joka on puun ylin osa. Sitten se seuraa puuta kohdetapahtumaa, joka on “buttonOne”. Näin se kulkee:
menetelmän ylikuormituksen edut Java-tilassa
Kuten kuvasta näkyy, tapahtuma kulkee läpi DOM-terminologian, joka saavuttaa lopulta kohdetapahtuman. Nyt kun tapahtuma saavuttaa tavoitteensa, se ei lopu. Se jatkuu ja jatkuu DOM-terminologioissa, kuten alla olevassa kuvassa on esitetty.
Aivan kuten aiemmin, jokaiselle tapahtuman polun elementille, kun se kulkee ylöspäin, ilmoitetaan sen olemassaolosta. Tämän ajan myötä sinun on mietittävä, voimmeko pysäyttää prosessin vai ei. No, vastaus kysymykseen on Kyllä, voimme lopettaa tapahtuman etenemisen. Tämä tapahtuu kutsumalla 'StopPropagation' tapahtumaobjektin menetelmä.
window.addEventListener ('click', e => {e.stopPropagation ()}, true) window.addEventListener ('click', kuuntelija ('c1'), true) window.addEventListener ('click', kuuntelija ('c2) '), true) window.addEventListener (' napsauta ', kuuntelija (' b1 ')) ikkuna.addEventListener (' napsauta ', kuuntelija (' b2 '))Soveltamalla avainsanaa voimme pysäyttää etenemisen. Se toimii näin, kun käytämme avainsanaa “ stopPropagation ” kaikkia tärkeimpien tapahtumien alla olevia tapahtumia ei kutsuta, joten niitä ei kutsuta, kuten yllä olevassa koodikappaleessa mainitaan. On toinen avainsana, joka tunnetaan nimellä stopImmediatePropagation ”. Kuten nimestä voi päätellä, se lopettaa sisarusten oikeudenkäynnit välittömästi.
Tämän avulla olemme päässeet artikkelimme loppuun. Toivon, että ymmärrät, mikä on tapahtumakuplinta ja tapahtumien sieppaaminen JavaScriptissä.
Nyt kun tiedät tapahtumakuplasta ja tapahtumien sieppaamisesta JavaScriptissä, tutustu kirjoittanut Edureka. Verkkokehityksen sertifiointikoulutus auttaa sinua oppimaan luomaan vaikuttavia verkkosivustoja HTML5-, CSS3-, Twitter Bootstrap 3-, jQuery- ja Google-sovellusliittymien avulla ja asentamaan sen Amazon Simple Storage Service (S3) -palveluun.
Onko sinulla kysymys meille? Mainitse se 'Tapahtumakuplat ja tapahtumien sieppaaminen JavaScript-ohjelmassa' kommenttiosassa, ja palaamme sinuun.