Events - reagér på klik

Grundformen#

const knap = document.querySelector("#gem");

knap.addEventListener("click", function () {
  console.log("Der blev klikket");
});

Tre dele: elementet, navnet på hændelsen, og funktionen der skal køre. Funktionen gemmes og kaldes af browseren senere, måske aldrig, hvis ingen klikker.

De hændelser, du bruger mest:

Hændelsesobjektet#

Funktionen får et objekt med information om, hvad der skete.

function paaKlik(event) {
console.log("type: " + event.type);
console.log("element: " + event.target);
}

paaKlik({ type: "click", target: "<button>" });

Tryk på “Kør koden”.

Det vigtigste felt er event.target: det element, hændelsen kom fra. Det bruges til at have én lytter på en hel liste i stedet for én på hvert element.

Formularer og preventDefault#

En formular genindlæser som udgangspunkt hele siden, når den sendes. Skal du håndtere den med JavaScript, må du bede browseren lade være.

const form = document.querySelector("#tilmeld");

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

  const navn = document.querySelector("#navn").value;

  if (navn === "") {
    console.log("Udfyld navn");
    return;
  }

  console.log("Sender " + navn);
});

event.preventDefault() skal stå som det første. Glemmer du den, blinker siden, og din kode når aldrig at gøre noget. Det ligner, at intet virker.

Samme metode bruges på et link, du ikke vil have til at navigere væk.

Én lytter til mange elementer#

Har du en liste med tyve knapper, sætter du ikke tyve lyttere på. Du sætter én på listen og kigger på, hvad der blev klikket:

const liste = document.querySelector("#opgaver");

liste.addEventListener("click", function (event) {
  if (event.target.matches("button.slet")) {
    event.target.closest("li").remove();
  }
});

Det virker, fordi et klik bobler opad gennem elementerne. Fra knappen til listepunktet til listen. Det hedder event bubbling, og det er værd at kunne forklare til eksamen.

Kort opsamling#

• element.addEventListener("click", funktion). Funktionsnavnet uden parenteser.
• event.target er det, der blev klikket på.
• event.preventDefault() stopper formularens genindlæsning.
• Én lytter højere oppe kan dække mange elementer.