Mange webapplikationer er afhængige af en form for begivenhed for at udføre deres funktioner. På et tidspunkt interagerer et menneske med deres grænseflade, hvilket genererer en begivenhed. Disse menneskedrevne hændelser er typisk afhængige af en perifer enhed, såsom en mus eller et tastatur.

Når en enhed opretter en begivenhed, kan programmet lytte efter den for at vide, hvornår det skal udføre specifik adfærd. I denne vejledning lærer du, hvordan du lytter efter begivenheder ved hjælp af JavaScript.

Hvad er begivenhedsdrevet programmering?

Hændelsesdrevet programmering er navnet på et paradigme, der er afhængig af udførelsen af ​​en begivenhed for at udføre sine funktioner. Det er muligt at oprette et begivenhedsdrevet program på et hvilket som helst højt niveau programmeringssprog. Men hændelsesdrevet programmering er mest almindelig i sprog som JavaScript, der integreres med en brugergrænseflade.

Hvad er en begivenhedslytter?

En hændelseslytter er en funktion, der starter en foruddefineret proces, hvis en specifik hændelse opstår. Så en begivenhedslytter "lytter" efter en handling og kalder derefter en funktion, der udfører en relateret opgave. Denne begivenhed kan antage en af ​​mange former. Almindelige eksempler omfatter musebegivenheder, tastaturbegivenheder og vinduesbegivenheder.

Oprettelse af en begivenhedslytter ved hjælp af JavaScript

Du kan lytte efter begivenheder på enhver element i DOM. JavaScript har en addEventListener() funktion, som du kan kalde på ethvert element på en webside. Det addEventListener() funktion er en metode til EventTarget interface. Alle objekter, der understøtter hændelser, implementerer denne grænseflade. Dette inkluderer vinduet, dokumentet og individuelle elementer på siden.

Funktionen addEventListener() har følgende grundlæggende struktur:

element.addEventListener("event", functionToExecute);

Hvor:

• det element kan repræsentere ethvert HTML-tag (fra en knap til et afsnit)
• det "begivenhed" er en streng, der navngiver en specifik, genkendt handling
• det functionToExecute er en reference til en eksisterende funktion

Lad os oprette følgende webside, der har et par HTML-elementer:

Velkommen


 Hej, velkommen til min hjemmeside.


Lær mere





Bruger info

Brugernavn: 

Indsend

HTML-koden ovenfor opretter en simpel side, der linker til en JavaScript-fil kaldet app.js. Det app.js filen vil indeholde koden til opsætning af begivenhedslyttere. Så hvis du vil starte en specifik proces, hver gang en bruger klikker på den første knap på websiden, er dette filen, den skal oprettes i.

App.js-filen

document.querySelector('.btn').addEventListener("klik", klikDemo)
function clickDemo(){
 console.log("Hej")
}

JavaScript-koden ovenfor giver adgang til den første knap på siden ved hjælp af querySelector() fungere. Det tilføjer derefter en begivenhedslytter til dette element ved hjælp af addEventListener() metode. Den specifikke begivenhed, den lytter efter, har navnet "klik". Når knappen udløser denne begivenhed, vil lytteren kalde klikDemo() fungere.

Relaterede: Lær, hvordan du bruger DOM-vælgere

Det klikDemo() funktionen udskriver "Hej" til browserkonsollen. Hver gang du klikker på knappen, bør du se dette output i din konsol.

"Klik" Event Output

Hvad er Mouse Events?

JavaScript har en MouseEvent grænseflade, der repræsenterer hændelser, der opstår på grund af en brugers interaktion med deres mus. Flere arrangementer bruger MouseEvent interface. Disse begivenheder omfatter følgende:

• klik
• dblclick
• musebevægelse
• mus over
• museud
• mouseup
• musen ned

Det klik hændelse opstår, når en bruger trykker og slipper en museknap, mens dens markør er over et element. Det er præcis, hvad der skete i det foregående eksempel. Som du kan se fra listen ovenfor, kan musebegivenheder antage mange former.

En anden almindelig musebegivenhed er dblclick, som står for dobbeltklik. Dette udløses, når en bruger klikker på en museknap to gange hurtigt efter hinanden. En bemærkelsesværdig ting ved addEventListener() funktion er, at du kan bruge den til at tildele flere begivenhedslyttere til et enkelt element.

Tilføjelse af en dblclick-begivenhed til den første knap

document.querySelector('.btn').addEventListener("dblclick", dblclickDemo)
function dblclickDemo(){
 alert("Dette er en demonstration af, hvordan man opretter en dobbeltklik-begivenhed")
}

Tilføjelse af koden ovenfor til app.js-filen vil effektivt oprette en anden begivenhedslytter til den første knap på websiden. Så ved at klikke på den første knap to gange oprettes følgende advarsel i browseren:

På billedet ovenfor kan du se advarslen, der er genereret, og du vil også se, at yderligere to "Hej"-udgange er i konsollen. Dette skyldes, at en dobbeltklik-begivenhed er en kombination af to klikbegivenheder, og der er begivenhedslyttere til begge klik og dblclick begivenheder.

Navnene på de andre musehændelser på listen beskriver deres adfærd. Det musebevægelse hændelse opstår, hver gang en bruger flytter deres mus, når markøren er over et element. Det mouseup hændelse opstår, når en bruger holder en knap nede over et element og derefter slipper det.

Hvad er tastaturbegivenheder?

JavaScript har en KeyboardEvent interface. Dette lytter efter interaktioner mellem en bruger og deres tastatur. I fortiden, KeyboardEvent havde tre begivenhedstyper. JavaScript har dog siden forældet tastetryk begivenhed.

Så tastetryk og tasten ned begivenheder er de eneste to anbefalede tastaturbegivenheder, som er alt hvad du behøver. Det tasten ned hændelse opstår, når en bruger trykker ned på en tast, og tastetryk hændelse opstår, når en bruger frigiver den.

Ved at gense HTML-eksemplet ovenfor, er det bedste sted at tilføje en tastaturbegivenhedslytter på input element.

Tilføjelse af en Keyboard Event Listener til app.js-filen

lad hilsner = document.querySelector('p');
document.querySelector('input').addEventListener("keyup", captureInput)
function captureInput (e){
 greetings.innerText = (`Hej ${e.target.value}, velkommen til min hjemmeside.`)
}

Ovenstående kode bruger querySelector() funktion for at få adgang til afsnittet og input elementer på siden. Det kalder så addEventListener() metode på input element, som lytter efter tastetryk begivenhed. Når som helst a tastetryk begivenhed indtræffer, den captureInput() funktion tager nøgleværdien og tilføjer den til afsnittet på siden. Det e parameter repræsenterer hændelsen, som JavaScript tildeler automatisk. Dette hændelsesobjekt har en egenskab, target, som er en reference til det element, som brugeren interagerede med.

I dette eksempel er etiketten knyttet til input felt anmoder om et brugernavn. Hvis du skriver dit navn i inputfeltet, vil websiden se nogenlunde sådan ud:

Afsnittet indeholder nu inputværdien, som i eksemplet ovenfor er "Jane Doe".

addEventListener fanger alle former for brugerinteraktion

Denne artikel introducerede dig til addEventListener() metode, samt adskillige mus- og tastaturbegivenheder, du kan bruge med den. På dette tidspunkt ved du, hvordan du lytter efter en bestemt begivenhed, og hvordan du opretter en funktion, der reagerer på den.

Det addEventListener giver dog ekstra kapacitet via sin tredje parameter. Du kan bruge det til at kontrollere hændelsesudbredelse: rækkefølgen, hvori hændelser flytter fra elementer til deres forældre eller børn.

Forståelse af hændelsesudbredelse i JavaScript

Begivenheder er en kraftfuld JavaScript-funktion. At forstå, hvordan en webbrowser rejser dem mod elementer er nøglen til at mestre deres brug.

Læs Næste

Om forfatteren