Hendelsesbobling eller begivenhetsfanging i JavaScript

Når en hendelse inntreffer, bestemmer hendelsesforplantning elementordren for utførelse av hendelsene. I HTML Document Object Model (DOM) eksisterer det to metoder for begivenhetsutbredelse: hendelsesbobling og begivenhetsfangst. I hendelsen som bobler, behandles hendelsen relatert til det innerste eller barnelementet først. I motsetning til dette, i tilfelle fangst, blir en hendelse knyttet til det ytterste eller foreldrenes element håndtert, og deretter nærmer hendelsesstrømkontrollen barnelementet trinn for trinn.

Denne oppskrivningen vil diskutere JavaScript-begivenhetsbobling og begivenhetsfangst. Dessuten vil eksemplene relatert til hendelsesbobling og begivenhetsfangst bli demonstrert i denne artikkelen. Så la oss starte!

Arrangement bobling i JavaScript

I JavaScript er Event Bubbling en hendelse som bobler opp fra målet eller de innerste elementene til foreldrene, så følger den en topp til topp tilnærming og flytter hendelseskontrollstrømmen til sine forfedre. Hendelsesbobling anses som standard hendelsesflytmetode i alle moderne nettlesere.

Eksempel: Event Bubbling i JavaScript

I det følgende eksempel har vi lagt til en tittel med taggen, et divelement med ID “ParentElement” og det nestede barneknappelementet har ID “Childelement”:

Barn

Etter å ha hentet de opprettede HTML -elementene ved hjelp av "dokument.QuerySelector () ” Metode, vi vil legge til en hendelseslytter til begge Div “ParentElement” og den nestede knappen “Childelement”. Funksjonen passerte i “AddEventListener ()” vil vise den ekstra strengen i “Konsoll.Logg()" metode:

Utfør ovennevnte program i din favorittkodeditor eller en hvilken som helst online kodende sandkasse; Imidlertid vil vi bruke JSBIN til dette formålet:

Nå vil vi klikke på "Barn" Knapp som kan sees i følgende utdata:

Ved å klikke på "Barn" knapp, den passerte "funksjon()" I AddEvEnlistener () -metoden vil bli utført. Og så "ved trykk()" metode for “Div” elementet vil bli påkalt. Det skjer på grunn av “Event Bubbling”:

I det ovennevnte eksemplet, når vi har klikket på "Barn" knapp, The “Klikk” Arrangementet sendes fra knappen med ID “Childelement” og hendelsesflytkontroll beveger seg til "dokument" I følgende rekkefølge:

Hvordan stoppe arrangementet bobling i JavaScript

Bruker "begivenhet.stopPropagation () ” Metode, du kan enkelt stoppe arrangementet som bobler i JavaScript -programmet ditt, og det stopper arrangementets reise fra bunn til topp.

Eksempel: Stopp hendelsen som bobler i JavaScript

I det undergitte eksemplet vil vi legge til "begivenhet.stopPropagation () ” metode til "ved trykk()" Hendelse av den opprettede knappen som har ID “Childelement”. Som et resultat av det, vil ikke JavaScript -tolk overta hendelsen til det ytterste "dokument" -elementet:

Barn

Å klikke på den uthevede knappen vil bare skrive ut “Klikket barn” Og så stopper det hendelsen fra å boble:

Arrangementsfangst i JavaScript

Prosessen der en hendelse fanges opp når strømmen av kontrollen beveger seg fra toppelementet til målelementet er kjent som hendelsesfangst. Selv om moderne nettlesere ikke har muligheten til å aktivere hendelsesfangst som standard, kan du utføre denne operasjonen gjennom JavaScript -kode.

Eksempel: Hendelsesfangst i JavaScript

I vårt JavaScript -program, først og fremst, vil vi legge til en tittel og en “Div” element som har id “ParentElement” og dets barnelement med “Childelement” id:

Barn

Deretter vil vi påkalle "dokument.QuerySelector () ” Metode for å få foreldre og barnelement:

Følgende "Barn" Knappen vil først påkalle hendelsen som er lagt til overordnede element. Etter det vil den utføre hendelsen knyttet til målet:

I det ovennevnte eksemplet, når vi har klikket på "Barn" knapp, The “Klikk” Arrangementet sendes fra overordnede element som er "dokument" til det spesifiserte hendelsesmålet “Childelement” knapp:

Hvordan stoppe arrangementet i JavaScript

For å stoppe fangst av arrangementet, kan du bruke "begivenhet.stopPropagation () ” metode. Forskjellen mellom å stoppe hendelsesfangsten og begivenhetsboblingen er at vi i arrangementet boblet, vi knyttet til "hendelsen.stopPropagation () ”-metode med hendelsen relatert til barneelementet, mens hendelsen i hendelsen fangst.stopPropagation () -metode legges til i foreldrearrangementet.

Utfør det undergitte eksemplet for å vite hvordan du kan stoppe hendelsen til å fange opp ved hjelp av JavaScript-kode:

Barn

Den gitte utgangen betyr at hendelsesfangst blir stoppet etter å ha utført hendelsen tilknyttet overordnede element:

Her er den fulle utsikten over hendelsesstrømmen med hendelsesfangst og boblende faser:

Konklusjon

I JavaScript er hendelsesbobling og begivenhetsfangst de viktigste konseptene med hensyn til begivenhetsutbredelse. I HTML DOM refererer hendelsesfangst til utbredelse av hendelser fra stamfarens elementer til barnet sitt. I begrepet bobling beveger hendelseskontrollstrømmen seg fra barneelementene til forfedrene. Denne oppskrivningen diskuterte JavaScript-hendelsesbobling og begivenhetsfanging. Dessuten er også eksemplene relatert til hendelsesbobling og fangst av hendelser demonstrert i denne artikkelen.