Forståelse af hændelsesudbredelse i JavaScript

Hændelser i JavaScript fungerer som meddelelser om, at en brugerinteraktion eller anden handling har fundet sted. For eksempel, når du klikker på en formularknap, genererer din browser en hændelse for at angive, at dette er sket. Indtastning i et søgefelt rejser også begivenheder, og det er sådan auto-suggest ofte fungerer online.

I JavaScript udløses hændelser, der involverer brugerinteraktion, normalt mod specifikke elementer. For eksempel rejser et klik på en knap en begivenhed mod den knap. Men begivenheder forplanter sig også: de skyder mod andre elementer i dokumenthierarkiet.

Læs videre for at lære alt om udbredelse af begivenheder og de to forskellige tilgængelige typer.

Hvad er hændelseshåndtering i JavaScript?

Du kan bruge JavaScript-kode til at fange og reagere på begivenheder, som en webside rejser. Du kan gøre dette for at tilsidesætte standardadfærd eller handle, når der ikke findes nogen standard. Et almindeligt eksempel er formvalidering. Hændelseshåndtering giver dig mulighed for at afbryde den normale proces med formularindsendelse.

Overvej dette eksempel:

Klik på Mig

Ovenstående kode har et knapelement med et id ved navn knap. Den har en klikhændelseslytter, der viser en advarsel sammen med beskeden Hej Verden.

Hvad er hændelsesformidling?

Hændelsesudbredelse beskriver den rækkefølge, som begivenhederne rejser gennem DOM træ når webbrowseren udløser dem.

Antag, at der er et form-tag inde i et div-tag, og begge har onclick-begivenhedslyttere. Hændelsesudbredelse beskriver, hvordan den ene hændelseslytter kan fyre efter den anden.

Der er to former for formering:

1. Begivenhedsbobling, hvorved begivenheder bobler opad, fra barn til forælder.
2. Hændelsesregistrering, hvorved hændelser rejser nedad, fra forælder til barn.

Hvad er Event Bubbling i JavaScript?

Hændelsesbobling betyder, at hændelsesudbredelsen vil være fra det underordnede element til dets overordnede element.

Overvej følgende eksempel. Den har tre indlejrede elementer: div, form og knap. Hvert element har en klik begivenheds lytter. Browseren viser en alert med en besked, når du klikker på hvert element.

Som standard vil den rækkefølge, som webbrowseren viser advarsler i, være knap, formular og derefter div. Begivenhederne bobler op fra barn til forælder.

 div


 form 



 Knap

Hvad er begivenhedsfangst?

Med event capture er rækkefølgen af ​​udbredelse det modsatte af boblende. Ellers er konceptet identisk. Den eneste forskel med at fange er, at begivenheder sker fra forælder til barn. I modsætning til det foregående eksempel vil browseren med hændelsesregistrering vise advarsler i denne rækkefølge: div, formular og knap.

For at opnå hændelsesregistrering skal du kun foretage én ændring af koden. Den anden parameter af addEventListener() definerer formeringstypen. Det er som standard falsk for at repræsentere boblende. For at aktivere hændelsesregistrering skal du indstille den anden parameter til sand.

 div.addEventListener("klik", ()=>{
 alarm("div")
 }, rigtigt);
 form.addEventListener("klik", ()=>{
 advarsel ("formular")
 }, rigtigt);
 button.addEventListener("klik", ()=>{
 alarm("knap")
 }, rigtigt);

Hvordan kan du forhindre udbredelse af begivenheder?

Du kan stoppe udbredelsen af ​​begivenheder ved hjælp af stopPropagation() metode. Det addEventListener() metode accepterer et hændelsesnavn og en handlerfunktion. Behandleren tager et hændelsesobjekt som sin parameter. Dette objekt indeholder alle oplysninger om begivenheden.

Når du påberåber dig stopPropagation() metode, vil hændelsen stoppe med at udbrede sig fra det tidspunkt. For eksempel når du bruger stopPropagation() på formularelementet vil begivenheder stoppe med at boble op til div. Hvis du klikker på knappen, vil du se begivenheder rejst på knappen og formularen, men ikke div.

form.addEventListener("klik", (e)=>{
e.stopPropagation();
 alert("form");
});

Relaterede: Det ultimative JavaScript-snydeark

JavaScript har en masse kraft under hætten

JavaScripts hændelseshåndtering er kraftfuld, sammenlignelig med mange komplette grænsefladesprog. Når du udvikler interaktive webapplikationer, er det en vital del af din værktøjskasse. Men der er mange andre avancerede emner at forstå. For professionelle JavaScript-udviklere er der meget at lære!

Hvis du vil lære at kode JavaScript som en professionel, så tjek vores guide til smart-one liners og forbered dig på at imponere i dit næste interview.

11 JavaScript One-Liner du bør kende

Opnå meget med kun lidt kode ved at bruge dette brede udvalg af JavaScript one-liners.

Læs Næste

Om forfatteren