DOM Events

Javascript

DOM Events

👉 Gör saker interaktiva

sv. HĂ€ndelser

  • Klicka en knapp
  • Hovra över en lĂ€nk
  • Ändra vĂ€rde i en inputruta
  • Trycka "Enter"
  • e.t.c

Hur?

👉 Vi vĂ€ljer elementet och sedan associerar en s.k. event listener pĂ„ det elementet

"Lyssna pÄ klick pÄ denn <button>"

"Lyssna pÄ hover pÄ denna <h1>"

"Lyssna pÄ knapptryckning för ENTER pÄ denna <input>"

Hur?

Man anvÀnder metoden addEventListener

const button = document.querySelector("button");

button.addEventListener("click", somethingHappened);


function somethingHappened() {
  console.log("NÅGON HAR KLICKAT KNAPPEN!");
}

Hur?

Att knyta funktionen till addEventListener

const button = document.querySelector("button");

button.addEventListener("click", function() {
  console.log("NÅGON HAR KLICKAT KNAPPEN!");
});

Olika Events

MDN listar över 300 olika events. NÄgra vanliga:

 

  • click
  • mouseover
  • change
  • keydown
  • drag