I JavaScript kan vi bruke ulike mouse events for å interagere med nettsider på en dynamisk måte. Vanlige hendelser som kan fanges opp er når brukeren klikker, holder musen over et element, eller beveger musen. I tillegg kan vi hente musekoordinatene for å lage mer interaktivt innhold.

1. Mouse Events

En mouse event er en hendelse som skjer når brukeren gjør noe med musen, som å klikke eller bevege den over et element.

`click`-hendelsen

click-hendelsen oppstår når brukeren klikker på et element.

Live Preview:

script.js

Loading editor...

let button = document.getElementById("myButton");
button.addEventListener("click", function() {
  console.log("Knappen xble klikket!");
});

Når brukeren klikker på knappen (myButton), skrives "Knappen ble klikket!" i konsollen.

Live Preview:

script.js

Loading editor...

let box = document.getElementById("myBox");
box.addEventListener("mouseover", function() {
  box.style.backgroundColor = "lightblue";
});
box.addEventListener("mouseout", function() {
  box.style.backgroundColor = "white";
});

mouseover: Når musen er over elementet, endres bakgrunnsfargen til lys blå. mouseout: Når musen forlater elementet, settes bakgrunnsfargen tilbake til hvit.

2. Musekoordinater

Når musen beveger seg over nettsiden, kan vi hente posisjonen til musen med clientX og clientY. Disse gir deg x- og y-posisjonene til musepekeren i forhold til nettsidens synlige område.

Live Preview:

script.js

Loading editor...

document.addEventListener("mousemove", function(event) {
  document.getElementById("coords").textContent =
    "X: " + event.clientX + ", Y: " + event.clientY;
});

3. Kombinere musehendelser og musekoordinater

Her er et eksempel der vi viser musekoordinatene i sanntid mens brukeren beveger musen over et element.

Live Preview:

script.js

Loading editor...

let mouseArea = document.getElementById("mouseArea");
let coordinates = document.getElementById("coordinates");

mouseArea.addEventListener("mousemove", function(event) {
  let x = event.clientX;
  let y = event.clientY;
  coordinates.textContent = "X: " + x + ", Y: " + y;
});

Flervalgsoppgaver – Mouse Events i JavaScript

Her kommer noen spørsmål for å teste deg på det du har lært om mouse events!

Oppgave 1: Hva skjer når du bruker clientX?

Hva returnerer clientX når du beveger musen?

Oppgave 2: Hva brukes addEventListener til?

Hva er hovedformålet med addEventListener i JavaScript?

Oppgave 3: Hvilken hendelse brukes når du holder musen over et element?

Hvilket event aktiveres når du holder musepekeren over et HTML-element?

Oppgaver

Oppgave 1: Oppgave 1: Vis musekoordinater

Lag en nettside der du viser musekoordinatene mens brukeren beveger musen over hele vinduet.

Oppgave 2: Oppgave 2: Endre farge ved museklikk

Lag en nettside med et område (div) som bytter farge hver gang brukeren klikker på det.

Oppgave 3: Oppgave 3: Endre tekst ved mouseover

Lag et avsnitt som endrer tekst når musen holdes over det, og går tilbake når musen fjernes.

click-hendelsen

`click`-hendelsen