Hva er hendelsesfangst i JavaScript?
I JavaScript kan forskjellige typer hendelser utføres, inkludert fangst av hendelser og bobling av hendelser. For eksempel forplanter hendelsesfangere fra rotelementet til barneelementet. På den andre siden forplanter hendelsen som bobler barnelementet til foreldrene eller rotelementet. Å utføre arrangementet som fanger “AddEventListener ()”Metode kan brukes.
Dette innlegget vil forklare JavaScript -arrangementet som fanger.
Hva er hendelsesfangst i JavaScript?
Hendelsesfangst er et bestemt scenario der hendelsene som genereres begynner fra foreldreelementene, og beveger seg ned mot mål/barneelementet som initierte hendelsessyklusen. Det er helt annerledes enn hendelsesbobling, der hendelser forplanter seg utover fra det spesifikke til de ytterste elementene. Dessuten oppstår fangst av elementer før bobling.
Syntaks
AddEventListener (type, lytter, usecapture)
I denne syntaksen:
- “type”Bestemmer typen av arrangementet.
- “lytter”Definerer samtalefunksjonen når en spesifikk hendelse oppstår.
- “Bruket”Indikerer den boolske verdien som er falsk som standard og viser at den er i boblende fase.
Eksempel 1: Hendelsesfangst av knappelement
Først, legg til en "div”Container og tilordne en ID med et bestemt navn for å fange opp hendelsen. Neste, bruk "”Element for å lage en knapp og legge inn litt tekst som skal vises på knappen:
Videre, mellom "”Element, først, påkalle“QuerySelector ()”Metode og passere“id”Å velge og lagre i den deklarerte variabelen:
var parentElement = dokument.QuerySelector ('#main');
Få tilgang til knappen ved å bruke knapp -ID ved hjelp av "QuerySelector ()”:
var childElement = dokument.querySelector ('#btn');
Påkalle “AddEventListener ()”Og bestå arrangementet. Denne hendelsen fungerer når brukeren klikker på knappen. Det vil utløse foreldreelementet på hvert knappeklikk og skrive ut resultatet på konsollen:
ParentElement.AddEventListener ('klikk', funksjon ()
konsoll.Logg ("Invoke Parent Element");
,ekte);
Bruk “Childelement.AddEventListener ()”Metode for å påkalle barnelementet på hver knappeklikk -hendelse. Ring deretter konsollen.Log () -metode for å vise resultatet på konsollen:
Childelement.AddEventListener ('klikk', funksjon ()
konsoll.Logg ("Invoke Child Element");
);
Det kan observeres at hendelsen er blitt fanget med suksess på hvert knappeklikk:
Eksempel 2: Hendelsesfangst av avsnittselementet
For å fange opp avsnittselementet, bruk " Først Sekund Tredje Definere en “event_capturing ()”Funksjon og bruk følgende kode oppført nedenfor: Ring den definerte funksjonen for å vises på skjermen: Det handler om arrangementet som fanger i JavaScript. Konklusjon Arrangementsfangst begynner å forplante elementet fra foreldrene og beveger seg ned mot målet/barneelementet som initierte hendelsessyklusen. Å utføre arrangementet som fanger “AddEventListener ()”Metode kan brukes. Dette innlegget har vist metoden for å utføre hendelsesfangst.
funksjon event_capturing ()
var all_p = dokument.getElementsByTagName ("P");
for (var i = 0; i < All_p.length; i++)
All_p [i].AddEventListener ("Klikk", ClickHandler, True);
funksjon ClickHandler ()
Varsel (dette.getAttribute ("id") + "hendelse håndtert vellykket");