5.4 Hendelseshåndtering og brukerinteraksjon

Hendingshandtering og brukarinteraksjon

I førre kapittel lærte vi å endre nettsida med JavaScript. Men endringane skjedde berre når koden køyrde ved sidelasting. For å skape verkeleg interaktive nettsider treng vi å reagere på handlingane til brukaren – klikk, tastetrykk, muserørsler og skjemainnsending. Dette vert kalla hendingshandtering (event handling).

Hendingssystemet i JavaScript fungerer etter eit enkelt prinsipp: du fortel nettlesaren «når denne hendinga skjer på dette elementet, køyr denne koden». Nettlesaren ventar tolmodig og køyrer koden din berre når hendinga faktisk inntreff. Dette er ein asynkron programmeringsmodell – koden køyrer ikkje i rekkjefølgje frå topp til botn, men som respons på hendingar.

Den tilrådde måten å handtere hendingar på er med addEventListener():

const knapp = document.querySelector("#minKnapp");

knapp.addEventListener("click", function () {
  console.log("Knappen ble klikket!");
});

addEventListener tek to argument:
1. Hendingsnamnet som ein streng (f.eks. "click")
2. Ein funksjon som vert køyrd når hendinga inntreff (vert kalla ein callback-funksjon)

Du kan òg bruke pilfunksjonar:

knapp.addEventListener("click", () => {
  console.log("Klikk registrert!");
});

Eller referere til ein namngitt funksjon:

function handterKlikk() {
  console.log("Funksjon ble kalt!");
}

knapp.addEventListener("click", handterKlikk);

Vanlege hendingstypar

Når ei hending inntreff, sender nettlesaren automatisk eit event-objekt til callback-funksjonen. Dette objektet inneheld nyttig informasjon om hendinga:

const knapp = document.querySelector("#minKnapp");

knapp.addEventListener("click", function (event) {
  console.log("Type:", event.type);          // "click"
  console.log("Mål:", event.target);          // Elementet som ble klikket
  console.log("X-posisjon:", event.clientX);  // Musens x-koordinat
  console.log("Y-posisjon:", event.clientY);  // Musens y-koordinat
});

Event-objektet for tastehendingar

document.addEventListener("keydown", function (event) {
  console.log("Tast:", event.key);         // F.eks. "Enter", "a", "Escape"
  console.log("Kode:", event.code);        // F.eks. "Enter", "KeyA", "Escape"
  console.log("Shift holdt:", event.shiftKey);  // true/false
  console.log("Ctrl holdt:", event.ctrlKey);    // true/false
});

event.target – identifiser kjelde-elementet

event.target refererer til det elementet som faktisk utløyste hendinga. Dette er spesielt nyttig når du har mange like element:

const knapper = document.querySelectorAll(".farge-knapp");

knapper.forEach(knapp => {
  knapp.addEventListener("click", function (event) {
    const valgtFarge = event.target.dataset.farge;
    document.body.style.backgroundColor = valgtFarge;
  });
});

Med tilhøyrande HTML:

<button class="farge-knapp" data-farge="lightblue">Blå</button>
<button class="farge-knapp" data-farge="lightgreen">Grønn</button>
<button class="farge-knapp" data-farge="lightyellow">Gul</button>

Eit av dei viktigaste bruksområda for hendingshandtering er skjemavalidering – å sjekke at brukaren har fylt inn gyldige data før dei vert sende til tenaren.

Hindre standard åtferd

Når eit skjema vert sendt inn, lastar nettlesaren normalt sida på nytt. For å handtere innsendinga med JavaScript må vi stoppe denne åtferda:

const skjema = document.querySelector("#registrering");

skjema.addEventListener("submit", function (event) {
  event.preventDefault();  // Stopp sidelasting!

  // Hent verdier fra skjemaet
  const navn = document.querySelector("#navn").value;
  const epost = document.querySelector("#epost").value;

  console.log("Navn:", navn);
  console.log("E-post:", epost);
});

Komplett skjemavalidering

<form id="pamelding">
  <label>Navn: <input type="text" id="navn"></label>
  <label>E-post: <input type="email" id="epost"></label>
  <label>Alder: <input type="number" id="alder"></label>
  <button type="submit">Send inn</button>
  <div id="feilmeldinger"></div>
</form>

const skjema = document.querySelector("#pamelding");

skjema.addEventListener("submit", function (event) {
  event.preventDefault();

  const navn = document.querySelector("#navn").value.trim();
  const epost = document.querySelector("#epost").value.trim();
  const alder = Number(document.querySelector("#alder").value);
  const feilDiv = document.querySelector("#feilmeldinger");
  const feil = [];

  // Valider navn
  if (navn === "") {
    feil.push("Navn er obligatorisk.");
  } else if (navn.length < 2) {
    feil.push("Navnet må ha minst 2 tegn.");
  }

  // Valider e-post (enkel sjekk)
  if (!epost.includes("@") || !epost.includes(".")) {
    feil.push("Ugyldig e-postadresse.");
  }

  // Valider alder
  if (isNaN(alder) || alder < 13 || alder > 120) {
    feil.push("Alder må være mellom 13 og 120.");
  }

  // Vis resultat
  if (feil.length > 0) {
    feilDiv.innerHTML = feil.map(f => "<p style='color:red'>" + f + "</p>").join("");
  } else {
    feilDiv.innerHTML = "<p style='color:green'>Påmelding mottatt!</p>";
  }
});

Når du har mange element som skal reagere på klikk (til dømes ei liste med hundre element), er det ineffektivt å leggje til ein hendingslyttar på kvart einskild element. I staden kan du bruke event delegation – éin lyttar på forelder-elementet:

// I stedet for dette (ineffektivt):
document.querySelectorAll("li").forEach(li => {
  li.addEventListener("click", function () {
    console.log(this.textContent);
  });
});

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

Hendinga boblar opp (event bubbling) frå barneelementet til forelderen. Lyttaren på <ul> fangar opp klikk på alle <li>-element, og event.target fortel oss kva element som vart klikka.

Event delegation har to store fordelar:
1. Yting: Berre éin lyttar i staden for mange
2. Dynamisk innhald: Fungerer òg for element som vert lagde til seinare med JavaScript

Oppsummering

I dette kapittelet har du lært:

- Hending (event): ei handling i nettlesaren JavaScript kan reagere på.
- addEventListener: koblar ein funksjon til ei hending.
- Hendingstypar: click, keydown, submit m.fl.
- event.target: identifiserer kjelde-elementet.
- preventDefault og skjemavalidering: kontrollerer standard åtferd.

Nøkkelomgrep