Du har en knapp på nettsiden din, men ingenting skjer når du klikker på den. Siden ser bra ut, men den er statisk. For å gjøre den interaktiv må du fortelle JavaScript hva som skal skje når brukeren gjør noe. Det er her events kommer inn. Med addEventListener lytter du etter klikk, tastetrykk, musebevegelser og andre hendelser, og kjører kode når de inntreffer.
Hva er events i JavaScript
En event er en hendelse som skjer i nettleseren. Brukeren klikker på en knapp, beveger musa over et bilde, trykker en tast på tastaturet, eller sender et skjema. Nettleseren registrerer disse hendelsene hele tiden, men JavaScript gjør ingenting med dem med mindre du ber om det.
For å reagere på en event trenger du en eventlistener. Den festes til et bestemt element og lytter etter en bestemt type hendelse. Når hendelsen inntreffer, kjører den en funksjon du har valgt. Uten eventlisteners er en nettside bare et dokument du kan lese. Med dem blir den en applikasjon du kan bruke.
addEventListener kobler hendelse til funksjon
Den moderne måten å registrere events JavaScript på er med addEventListener. Du kaller metoden på elementet du vil lytte på, sender inn typen hendelse som en tekststreng, og en funksjon som skal kjøres.
Først velger du elementet med querySelector og lagrer det i en variabel. Deretter lager du en funksjon som inneholder koden du vil kjøre. Til slutt kobler du dem sammen med addEventListener, der første argument er hendelsestypen (for eksempel "click") og andre argument er funksjonen.
Legg merke til at du skriver funksjonsnavnet uten parenteser i addEventListener. Parenteser ville kjørt funksjonen umiddelbart. Uten parenteser sender du funksjonen som en referanse, slik at eventlisteneren kan kalle den senere, når hendelsen faktisk skjer.
Anonyme funksjoner rett i eventlisteneren
Du trenger ikke alltid lage en navngitt funksjon på forhånd. Hvis funksjonen bare brukes et sted, kan du skrive den rett inn i addEventListener som en anonym funksjon. Da slipper du å finne på et navn og erklære funksjonen separat.
I stedet for funksjonsnavnet skriver du function() etterfulgt av en kodeblokk i klammeparenteser. All koden som skal kjøres når hendelsen inntreffer, legges inn i denne blokken. Resultatet er den samme oppførselen, men med mer kompakt kode.
Anonyme funksjoner er spesielt vanlige i eventlisteners fordi koden ofte er kort og spesifikk for akkurat den ene hendelsen. Skal du toggle en CSS-klasse med classList når en knapp klikkes, er det ryddigere å skrive det direkte enn å erklære en egen funksjon.
De vanligste event-typene
JavaScript har mange typer events, men noen brukes langt oftere enn andre:
- click utløses når brukeren klikker på et element. Den desidert mest brukte eventen.
- mouseenter utløses når musepekeren beveger seg inn over et element. Brukes for hover-effekter.
- mouseleave utløses når musepekeren forlater elementet.
- keydown utløses når en tast trykkes ned. Nyttig for tastatursnarveier og spill.
- keyup utløses når tasten slippes opp igjen.
- submit utløses når et skjema sendes. Brukes for å validere eller fange opp skjemadata.
- input utløses hver gang verdien i et input-felt endres. Bra for live-søk og sanntidsvalidering.
Du finner en komplett liste over events i MDN sin event-referanse. De viktigste å lære seg først er click, keydown og submit.
addEventListener kontra onclick
Det finnes en eldre måte å registrere events på. I stedet for addEventListener kan du skrive element.onclick = funksjonsnavn. Syntaksen er kortere, og den fungerer. Men det er en viktig begrensning: onclick lar deg bare koble en funksjon til eventen. Setter du onclick to ganger, overskriver den andre den første.
Med addEventListener kan du legge til flere funksjoner på samme event. Begge kjører når hendelsen inntreffer. Det gjør addEventListener mer fleksibel og tryggere i større prosjekter der flere deler av koden kan lytte på samme element.
Tilsvarende varianter finnes for andre events: onmouseenter, onkeydown, onsubmit. De har alle den samme begrensningen. I ny kode bør du alltid bruke addEventListener.
Hente data fra skjemafelt med events
Events blir virkelig nyttige når du kombinerer dem med input-felter. Fest en eventlistener til en knapp, og les verdien fra et tekstfelt inne i funksjonen. Input-elementets .value inneholder teksten brukeren har skrevet.
Et typisk mønster er å lese verdien, bruke den til å lage et nytt element med createElement, og deretter nullstille feltet ved å sette .value til en tom streng. Da kan brukeren skrive inn noe nytt umiddelbart.
Rekkefølgen i koden er viktig. Les verdien og lagre den i en variabel før du nullstiller feltet. Nullstiller du først, er verdien borte når du prøver å lese den.
Vanlige feil med events
Parenteser bak funksjonsnavnet. Skriver du addEventListener("click", minFunksjon()), kjøres funksjonen med en gang i stedet for å vente på klikket. Fjern parentesene slik at du sender funksjonen som referanse, ikke resultatet av å kjøre den.
Eventlistener på et element som ikke finnes. Hvis script-taggen kjøres før HTML-elementet er lastet, returnerer querySelector null. Kaller du addEventListener på null, krasjer koden. Bruk defer-attributten på script-taggen, eller plasser den nederst i body.
Feil event-navn. Event-typen skrives som en tekststreng i anførselstegn. "click" fungerer, "Click" gjør det ikke. JavaScript er case-sensitiv, og event-navn skrives alltid med små bokstaver.
Neste steg med events i JavaScript
Events er limet som gjør en statisk nettside interaktiv. Kombinerer du events med querySelector for å velge elementer, classList for å endre utseende, og createElement for å bygge nye elementer, har du verktøyene du trenger for å lage dynamiske nettsider.
I kurset JavaScript for nybegynnere med instruktør Lars Vidar Nordli bygger du alt dette sammen i praksis. Du lager en handleliste-app der events styrer hele flyten: brukeren skriver inn en vare, klikker en knapp, varen dukker opp i listen, og den kan fjernes igjen med et nytt klikk. Kurset dekker også event-objektet, event delegation og hvordan du håndterer skjemaer uten at siden lastes på nytt.
