Event Bubbling og Event Capturing I JavaScript: Alt du trenger å vite

Event Bubbling og Event Capturing er de mest brukte begrepene i JavaScript på tidspunktet for hendelsesflyten. Dette er de to måtene for forplantning av hendelser i HTML DOM API. Denne artikkelen om hendelsesbobling og hendelsesfangst i JavaScript vil beskrive i detalj hvorfor vi trenger disse i i følgende rekkefølge:

• • • Hva er Event Bubbling i JavaScript?
    • Hva er begivenhetsformering?
    • Hva er hendelsesfangst?
    • Bruk av Event Bubbling og Event Capturing i JavaScript
    • Arbeidsprosedyre

Hva er Event Bubbling i JavaScript?

Event Bubbling er begrepet folk må komme over mens de utvikler en webapplikasjon eller en webside ved hjelp av . I utgangspunktet er Event Bubbling en teknikk der hendelsesbehandlere kalles når ett element er nestet på et annet element og må være av samme hendelse. Det ligner innkapsling.

Event Bubbling er bare en liten del av hendelsen i JavaScript. For å forstå det bedre må vi vite om Propagation av begivenheter og hvordan det støtter Event Bubbling.

Hva er begivenhetsformering?

Forplantning av begivenhet kan sammenlignes som foreldrebegrepet med begivenhet som bobler og fanger som sitt barn.Det er representert som følger:

hvordan bli en ingeniør for kunstig intelligens

Hvis du klikker på et hvilket som helst bilde, vil det ikke bare generere en klikkhendelse, men det går videre til foreldre “a” og bestefar “li”. På denne måten foregår utbredelsen av funksjonen. Her betraktes bildet som barnet, og det er hendelsesmålet hvor klikket genereres. Bildet sammen med forfedrene sammen danner grenen i en treterminologi. Grenen er viktig når vi blir kjent med stien langs hvilken begivenhet forplantes.

Hver av lytterne ringes med henholdsvis et hendelsesobjekt som samler informasjon om arrangementet. Denne forplantningen er veldig viktig når vi blir kjent med prosessen med å ringe alle lyttere til den gitte hendelsen. Fra bildet ovenfor kan vi merke at grenbestemmelsen er statisk. Eventuelle treendringer som skjer under arrangementet blir ignorert. Her er forplantningen toveis, det vil si at den går fra vinduet til hendelsesmålet og kommer tilbake. Her er forplantningen bredt kategorisert i tre hovedtyper. Dette er:

1. Fangstfasen: Går fra vinduet til målfasen for hendelsen.
2. Målfasen: Det er målfasen.
3. Boblefasen: Fra foreldren til begivenhetsmålet tilbake til vinduet.

Hva er hendelsesfangst?

I denne fasen kalles forlytterne hvis verdi er registrert som 'sann'. Det er skrevet som:

hvordan du bruker bitvise operatører i java

el.addEventListener ('klikk', lytter, sant)

Her har lytterverdien blitt registrert for å være “sann”, slik at denne hendelsen blir tatt. Hvis det ikke var noen verdi, var verdien som standard falsk, og hendelsen ble ikke fanget. Så i denne fasen finner den hendelsen hvis verdi er sant, bare veien fra vinduet og blir kalt og fanget.

I målfasen blir alle lyttere som er registrert ringt, uavhengig av flaggstatus som er sant eller usant.

Bruk av Event Bubbling og Event Capturing i JavaScript

I Bubbling-fasen kalles bare ikke-portretteren, det vil si hendelsene som har flaggverdi som 'falsk'. Hendelsesbobling og hendelsesfangst er veldig nyttige og viktige i DOM (Document Object Model) terminologi.

el.addEventListener ('klikk', lytter, falsk) // lytter fanger ikke el.addEventListener ('klikk', lytter) // lytter fanger ikke

Ovenfor stykke kode viser arbeidet med boblende og fangstfase. Ikke alle begivenheter går til begivenhetsmålet. Noen av dem blir ikke boblet opp. Reisene deres stopper etter målfasen. De tre hendelsesfasestrømningene er illustrert i følgende diagram:

Eventbobling fungerer ikke i alle typer arrangementer, men lytteren må ha '.boble ”Boolsk eiendom til hendelsesobjektet. Noen av de andre egenskapene inkluderer:

1. e.target: som refererer til begivenhetsmålet.
2. e.currentTarget: det er modusen som nåværende lyttere er registrert på. Her refereres verdien til ved hjelp av dette nøkkelord.
3. e.eventPhase: Det er et heltall som refererer til andre tre nøkkelord som Capturing_phase, Bubbling_phase, AT_Target fase.

Arbeidsprosedyre

La oss se nærmere på illustrasjonen ovenfor. La oss klikke på “buttonOne” -elementet, og så vil en hendelse umiddelbart utløses. Normalt starter en begivenhet sin reise fra roten som er det øverste elementet i treet. Deretter følger den treet målhendelsen som er “buttonOne”. Slik reiser det:

Som vist i figuren, begir begivenheten seg gjennom DOM-terminologiene og når til slutt hendelsen. Nå når arrangementet når målet, slutter det ikke. Det fortsetter og fortsetter innenfor DOM-terminologier som illustrert i bildet nedenfor.

spørsmål om java-klasselaster

Akkurat som før, får hvert element langs arrangementets vei når det går oppover beskjed om dets eksistens. Når det fortsetter slik må du tenke på om vi kan stoppe prosessen eller ikke. Svaret på spørsmålet er ja, vi kan stoppe forplantningen av hendelsen. Dette gjøres ved å påkalle “StopPropagation” metode for hendelsesobjektet.

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 '))

Ved å bruke nøkkelordet er vi i stand til å stoppe forplantningen. Det fungerer slik når vi bruker nøkkelordet “ stopPropagation ” da blir ikke alle hendelsene under hovedbegivenhetene kalt, og de vil derfor ikke kalles slik det er nevnt i kodebiten ovenfor. Det er et annet nøkkelord kjent som “ stopImmediatePropagation ”. Som navnet antyder stopper det søsknene umiddelbart.

Med dette har vi kommet til slutten av artikkelen vår. Jeg håper du forsto hva som er Event Bubbling and Event Capturing i JavaScript.

Nå som du vet om Event Bubbling og Event Capturing i JavaScript, sjekk ut av Edureka. Webutvikling sertifiseringstrening hjelper deg med å lære hvordan du lager imponerende nettsteder ved hjelp av HTML5, CSS3, Twitter Bootstrap 3, jQuery og Google APIer og distribuerer det til Amazon Simple Storage Service (S3).

Har du et spørsmål til oss? Vennligst nevn det i kommentarfeltet i “Event Bubbling and Event Capturing in JavaScript”, så kommer vi tilbake til deg.