Forstå hendelsesforplantning i JavaScript

Hendelser i JavaScript fungerer som varsler om at en brukerinteraksjon, eller annen handling, har funnet sted. For eksempel, når du klikker på en skjemaknapp, genererer nettleseren din en hendelse for å indikere at dette har skjedd. Å skrive i en søkeboks øker også hendelser, og det er slik auto-suggest ofte fungerer på nettet.

I JavaScript utløses vanligvis hendelser som involverer brukerinteraksjon mot spesifikke elementer. For eksempel, å klikke på en knapp reiser en hendelse mot den knappen. Men hendelser forplanter seg også: de skyter mot andre elementer i dokumenthierarkiet.

Les videre for å lære alt om utbredelse av hendelser og de to forskjellige typene som er tilgjengelige.

Hva er hendelseshåndtering i JavaScript?

Du kan bruke JavaScript-kode til å fange opp og svare på hendelser som en nettside reiser. Du kan gjøre dette for å overstyre standardatferd eller iverksette tiltak når det ikke finnes noen standard. Et vanlig eksempel er skjemavalidering. Hendelseshåndtering lar deg avbryte den normale prosessen med innsending av skjema.

Tenk på dette eksemplet:

Klikk på meg

Koden ovenfor har et knappeelement med en id kalt knapp. Den har en klikkhendelseslytter som viser et varsel sammen med meldingen Hei Verden.

Hva er forplantning av hendelser?

Hendelsespredning beskriver rekkefølgen som hendelsene går gjennom DOM-tre når nettleseren utløser dem.

Anta at det er en form-tag inne i en div-tag, og begge har onclick-hendelseslyttere. Event Propagation beskriver hvordan den ene hendelseslytteren kan skyte etter den andre.

Det er to typer forplantning:

1. Begivenhetsbobling, der hendelser bobler oppover, fra barn til forelder.
2. Hendelsesregistrering, som gjør hendelser nedover, fra forelder til barn.

Hva er Event Bubbling i JavaScript?

Begivenhetsbobling betyr at hendelsesforplantningsretningen vil være fra det underordnede elementet til det overordnede elementet.

Tenk på følgende eksempel. Den har tre nestede elementer: div, form og knapp. Hvert element har en klikk begivenhetslytter. Nettleseren viser en varsling med en melding når du klikker på hvert element.

Som standard vil rekkefølgen nettleseren viser varsler i være knapp, skjema og deretter div. Begivenhetene bobler opp fra barn til forelder.

 div


 form 



 Knapp

Hva er hendelsesfangst?

Med hendelsesfangst er forplantningsrekkefølgen det motsatte av bobling. Ellers er konseptet identisk. Den eneste forskjellen med fangst er at hendelser skjer fra foreldre til barn. I motsetning til det forrige eksemplet, med hendelsesregistrering, vil nettleseren vise varsler i denne rekkefølgen: div, skjema og knapp.

For å oppnå hendelsesregistrering trenger du bare å gjøre én endring i koden. Den andre parameteren til addEventListener() definerer typen forplantning. Det er usann som standard for å representere bobling. For å aktivere hendelsesregistrering må du sette den andre parameteren til sann.

 div.addEventListener("klikk", ()=>{
 alert("div")
 }, ekte);
 form.addEventListener("klikk", ()=>{
 alert("skjema")
 }, ekte);
 button.addEventListener("klikk", ()=>{
 alert("knapp")
 }, ekte);

Hvordan kan du forhindre spredning av hendelser?

Du kan stoppe spredningen av hendelser ved å bruke stopPropagation() metode. De addEventListener() metoden aksepterer et hendelsesnavn og en behandlerfunksjon. Behandleren tar et hendelsesobjekt som parameter. Dette objektet inneholder all informasjon om hendelsen.

Når du påkaller stopPropagation() metoden, vil hendelsen slutte å forplante seg fra det tidspunktet. For eksempel når du bruker stopPropagation() på skjemaelementet vil hendelser slutte å boble opp til div. Hvis du klikker på knappen, vil du se hendelser på knappen og skjemaet, men ikke div.

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

I slekt: The Ultimate JavaScript Cheat Sheet

JavaScript har mye kraft under panseret

JavaScripts hendelseshåndtering er kraftig, sammenlignbar med mange fullverdige grensesnittspråk. Når du utvikler interaktive nettapplikasjoner, er det en viktig del av verktøykassen din. Men det er mange andre avanserte emner å ta tak i. For profesjonelle JavaScript-utviklere er det mye å lære!

Hvis du ønsker å lære å kode JavaScript som en proff, sjekk ut vår guide til smart-one liners og forbered deg på å imponere i ditt neste intervju.

11 JavaScript One-Liner du bør kjenne til

Oppnå mye med bare litt kode ved å bruke dette brede utvalget av JavaScript one-liners.

Les Neste

Om forfatteren