5.4 Hendelseshåndtering og brukerinteraksjon

Nettleseren som venter tålmodig

Vi kan endre nettsiden med JavaScript, men så langt har endringene bare skjedd ved sidelasting. For virkelig interaktivitet må vi reagere på brukerens handlinger – klikk, tastetrykk, musebevegelser og skjemainnsending. Dette kalles hendelseshåndtering.

Prinsippet er enkelt: du forteller nettleseren «når denne hendelsen skjer på dette elementet, kjør denne koden». Så venter nettleseren tålmodig og kjører koden din bare når hendelsen faktisk inntreffer. Dette er en asynkron modell – koden kjører ikke fra topp til bunn, men som respons på hendelser. En hendelse er en handling i nettleseren, som museklikk (click), tastetrykk (keydown), skjemainnsending (submit) eller sidelasting (load).

Den anbefalte måten å lytte på er addEventListener():

const knapp = document.querySelector("#minKnapp");
knapp.addEventListener("click", function () {
  console.log("Knappen ble klikket!");
});

Metoden tar to argumenter: hendelsesnavnet som en streng ("click"), og en funksjon som kjøres når hendelsen inntreffer – kalt en callback-funksjon. Du kan bruke en vanlig funksjon, en pilfunksjon, eller referere til en navngitt funksjon. Vanlige hendelser er click, dblclick, mouseover, keydown, input, submit, change og scroll.

Hva hendelsen forteller oss

Når en hendelse inntreffer, sender nettleseren automatisk et event-objekt til callback-funksjonen. Det inneholder nyttig informasjon: event.type er hendelsestypen, event.target er elementet som utløste hendelsen, og for museklikk finnes event.clientX og event.clientY. For tastehendelser gir event.key hvilken tast som ble trykket (som «Enter» eller «Escape»), og event.shiftKey og event.ctrlKey forteller om disse tastene var holdt.

Spesielt nyttig er event.target, som peker på elementet som faktisk utløste hendelsen. Det er gull verdt når du har mange like elementer. Tenk deg flere fargeknapper, der hver har en data-farge-attributt – du kan lese event.target.dataset.farge for å vite hvilken farge som ble valgt, og sette bakgrunnen deretter.

Det kanskje viktigste bruksområdet er skjemavalidering – å sjekke at brukeren har fylt inn gyldige data før de sendes. Når et skjema sendes inn, laster nettleseren normalt siden på nytt. For å håndtere det selv må du stoppe denne standardoppførselen med event.preventDefault():

skjema.addEventListener("submit", function (event) {
  event.preventDefault();  // stopp sidelasting
  const navn = document.querySelector("#navn").value.trim();
  // ... valider og vis feilmeldinger
});

En typisk validering henter verdiene, sjekker at navnet ikke er tomt, at e-posten inneholder @ og ., og at alderen er innenfor et fornuftig intervall – og samler eventuelle feil i en liste som vises til brukeren. En liten detalj: .value.trim() fjerner mellomrom rundt det brukeren skrev.

Én lytter for hundre elementer

Hva om du har en liste med hundre elementer som alle skal reagere på klikk? Å legge en egen lytter på hvert element er ineffektivt. Løsningen heter event delegation – du legger én lytter på forelderen i stedet:

document.querySelector("ul").addEventListener("click", function (event) {
  if (event.target.tagName === "LI") {
    console.log(event.target.textContent);
  }
});

Dette virker fordi hendelser bobler opp (event bubbling) fra barneelementet til forelderen. Lytteren på <ul> fanger derfor klikk på alle <li>-elementer, og event.target forteller hvilket som ble klikket. Event delegation har to store fordeler: bedre ytelse, siden du trenger bare én lytter i stedet for mange, og at det også virker for elementer som legges til senere med JavaScript. Det siste er spesielt nyttig i dynamiske lister som vokser mens brukeren jobber.

Med dette har du alt du trenger for å bygge ekte interaksjon – fra en interaktiv quiz som reagerer på svar, til skjemaer som validerer og gir tilbakemelding i sanntid.

Oppsummering

Hendelseshåndtering gjør nettsider interaktive. En hendelse er en handling i nettleseren – klikk, tastetrykk, skjemainnsending – og du reagerer på den med addEventListener, som kobler en callback-funksjon til hendelsen. Modellen er asynkron: koden kjører først når hendelsen inntreffer.

Nettleseren sender et event-objekt med nyttig info, der event.target peker på elementet som utløste hendelsen. Med event.preventDefault() stopper du standardoppførsel som sidelasting, slik at du selv kan håndtere skjemavalidering. Og med event delegation, som utnytter at hendelser bobler opp, legger du én effektiv lytter på forelderen i stedet for mange på barna. Til sammen er dette grunnlaget for alle interaktive grensesnitt på webben.