Mange nettapplikasjoner er avhengige av en eller annen form for hendelse for å utføre sine funksjoner. På et tidspunkt samhandler et menneske med grensesnittet deres, noe som genererer en hendelse. Disse menneskedrevne hendelsene er vanligvis avhengige av en perifer enhet, for eksempel en mus eller et tastatur.

Når en enhet oppretter en hendelse, kan programmet lytte etter den, for å vite når det skal utføres spesifikk oppførsel. I denne opplæringen lærer du hvordan du lytter etter hendelser ved hjelp av JavaScript.

Hva er hendelsesdrevet programmering?

Hendelsesdrevet programmering er navnet på et paradigme som er avhengig av utførelsen av en hendelse for å utføre sine funksjoner. Det er mulig å lage et hendelsesdrevet program i et hvilket som helst programmeringsspråk på høyt nivå. Men hendelsesdrevet programmering er mest vanlig i språk som JavaScript som integreres med et brukergrensesnitt.

Hva er en eventlytter?

En hendelseslytter er en funksjon som starter en forhåndsdefinert prosess hvis en spesifikk hendelse inntreffer. Så en hendelseslytter "lytter" etter en handling, og kaller deretter en funksjon som utfører en relatert oppgave. Denne hendelsen kan ha en av mange former. Vanlige eksempler inkluderer musehendelser, tastaturhendelser og vindushendelser.

Opprette en hendelseslytter ved å bruke JavaScript

Du kan lytte etter arrangementer på alle element i DOM. JavaScript har en addEventListener() funksjon som du kan kalle på et hvilket som helst element på en nettside. De addEventListener() funksjon er en metode for EventTarget grensesnitt. Alle objekter som støtter hendelser implementerer dette grensesnittet. Dette inkluderer vinduet, dokumentet og individuelle elementer på siden.

AddEventListener()-funksjonen har følgende grunnleggende struktur:

element.addEventListener("hendelse", functionToExecute);

Hvor:

• de element kan representere hvilken som helst HTML-tag (fra en knapp til et avsnitt)
• de "begivenhet" er en streng som navngir en spesifikk, gjenkjent handling
• de functionToExecute er en referanse til en eksisterende funksjon

La oss lage følgende nettside som har noen få HTML-elementer:

Velkommen


 Hei, velkommen til nettstedet mitt.


Lære mer





brukerinformasjon

Brukernavn: 

Sende inn

HTML-koden ovenfor lager en enkel side som lenker til en JavaScript-fil kalt app.js. De app.js filen vil inneholde koden for å sette opp hendelseslyttere. Så hvis du ønsker å starte en spesifikk prosess hver gang en bruker klikker på den første knappen på nettsiden, er dette filen den skal opprettes i.

App.js-filen

document.querySelector('.btn').addEventListener("klikk", klikkDemo)
funksjon klikkDemo(){
 console.log("Hei")
}

JavaScript-koden ovenfor åpner den første knappen på siden ved å bruke querySelector() funksjon. Den legger deretter til en hendelseslytter til dette elementet ved å bruke addEventListener() metode. Den spesifikke hendelsen den lytter etter har navnet "klikk". Når knappen utløser den hendelsen, vil lytteren ringe clickDemo() funksjon.

I slekt: Lær hvordan du bruker DOM-velgere

De clickDemo() funksjonen skriver ut "Hei" til nettleserkonsollen. Hver gang du klikker på knappen, bør du se denne utgangen i konsollen.

"Klikk" Event Output

Hva er musehendelser?

JavaScript har en MouseEvent grensesnitt som representerer hendelser som oppstår på grunn av en brukers interaksjon med musen. Flere arrangementer bruker MouseEvent grensesnitt. Disse hendelsene inkluderer følgende:

• klikk
• dblclick
• musebevegelse
• mus over
• museut
• museopp
• muse ned

De klikk hendelse oppstår når en bruker trykker og slipper en museknapp mens pekeren er over et element. Dette er nøyaktig hva som skjedde i forrige eksempel. Som du kan se fra listen ovenfor, kan musehendelser ha mange former.

En annen vanlig musehendelse er dblclick, som står for dobbeltklikk. Dette utløses når en bruker klikker en museknapp to ganger i rask rekkefølge. En bemerkelsesverdig ting om addEventListener() funksjonen er at du kan bruke den til å tilordne flere hendelseslyttere til et enkelt element.

Legge til en dblclick-hendelse til den første knappen

document.querySelector('.btn').addEventListener("dblclick", dblclickDemo)
funksjon dblclickDemo(){
 alert("Dette er en demonstrasjon av hvordan du oppretter en dobbeltklikk-hendelse")
}

Hvis du legger til koden ovenfor i app.js-filen, opprettes en annen hendelseslytter for den første knappen på nettsiden. Så hvis du klikker på den første knappen to ganger, opprettes følgende varsel i nettleseren:

På bildet ovenfor ser du varselet som er generert, og du vil også se at ytterligere to "Hei"-utganger er i konsollen. Dette er fordi en dobbeltklikk-hendelse er en kombinasjon av to klikk-hendelser og det er hendelseslyttere for begge klikk og dblclick arrangementer.

Navnene på de andre musehendelsene i listen beskriver oppførselen deres. De musebevegelse hendelsen oppstår hver gang en bruker beveger musen når markøren er over et element. De museopp hendelse oppstår når en bruker holder nede en knapp over et element, og deretter slipper den.

Hva er tastaturhendelser?

JavaScript har en KeyboardEvent grensesnitt. Dette lytter etter interaksjoner mellom en bruker og deres tastatur. I fortiden, KeyboardEvent hadde tre hendelsestyper. Imidlertid har JavaScript siden avviklet tastetrykk begivenhet.

Så tastetrykk og tastene ned hendelser er de eneste to anbefalte tastaturhendelsene, som er alt du trenger. De tastene ned hendelsen oppstår når en bruker trykker ned på en tast, og tastetrykk hendelsen oppstår når en bruker slipper den.

Ved å gå tilbake til HTML-eksemplet ovenfor, er det beste stedet å legge til en tastaturhendelseslytter på input element.

Legge til en Keyboard Event Listener til app.js-filen

la hilsener = document.querySelector('p');
document.querySelector('input').addEventListener("keyup", captureInput)
function captureInput (e){
 greetings.innerText = (`Hei ${e.target.value}, velkommen til nettstedet mitt.`)
}

Koden ovenfor bruker querySelector() funksjon for å få tilgang til avsnittet og input elementer på siden. Den kaller da addEventListener() metode på input element, som lytter etter tastetrykk begivenhet. Når en tastetrykk hendelsen inntreffer, den captureInput() funksjonen tar nøkkelverdien og legger den til avsnittet på siden. De e parameteren representerer hendelsen, som JavaScript tilordner automatisk. Dette hendelsesobjektet har en egenskap, target, som er en referanse til elementet brukeren samhandlet med.

I dette eksemplet er etiketten festet til input feltet ber om et brukernavn. Hvis du skriver navnet ditt i inndatafeltet, vil nettsiden se omtrent slik ut:

Avsnittet inneholder nå inngangsverdien som i eksemplet ovenfor er "Jane Doe".

addEventListener fanger opp alle slags brukerinteraksjoner

Denne artikkelen introduserte deg for addEventListener() metoden, samt flere mus- og tastaturhendelser du kan bruke med den. På dette tidspunktet vet du hvordan du lytter etter en bestemt hendelse, og hvordan du lager en funksjon som reagerer på den.

De addEventListener gir imidlertid ekstra kapasitet via sin tredje parameter. Du kan bruke den til å kontrollere utbredelse av hendelser: rekkefølgen hendelser flytter fra elementer til foreldre eller barn.

Forstå hendelsesforplantning i JavaScript

Arrangementer er en kraftig JavaScript-funksjon. Å forstå hvordan en nettleser reiser dem mot elementer er nøkkelen til å mestre bruken.

Les Neste

Om forfatteren