JavaScript HTML DOM begivenheder

HTML DOM tillader JavaScript at reagere på HTML-tilfældigheder:

Mus kommer tættere på!
Klik mig

Reager på hændelser

JavaScript kan udføre kode, når et tilfældighed opstår, f.eks. når brugeren klikker på et HTML-element.

For at udføre kode, når brugeren klikker på et element, skal du tilføje JavaScript-kode til HTML-tilfældighedsattributterne:

onclick=JavaScript

Eksempel på HTML-tilfældigheder:

  • Når brugeren klikker på musen
  • når websiden indlæses
  • når billedet indlæses
  • når musen flyttes over elementet
  • når inputfeltet ændres
  • når HTML-formularen sendes
  • når brugeren trykker på en tast

I dette eksempel ændres indholdet, når brugeren klikker på <h1> ændres indholdet:

eksempel

<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML = 'Hello!'">Klik på denne tekst!</h1>
</body>
</html>

Prøv det selv

I dette eksempel kalder man funktionen fra eventhandleren:

eksempel

<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">Klik på denne tekst!</h1>
<script>
function changeText(id) { 
    id.innerHTML = "Hello:)";
}
</script>
</body>
</html>

Prøv det selv

HTML event-attributter

Hvis du vil tildele en begivenhed til et HTML-element, kan du bruge event-attributterne.

eksempel

tildeles til button-elementet onclick begivenhed:

<button onclick="displayDate()">Prøv det</button>

Prøv det selv

I det foregående eksempel vil funktionen med navnet displayDate blive udført, når knappen klikkes.

Tildeling af begivenheder med HTML DOM

HTML DOM giver dig mulighed for at tildele begivenheder til HTML-elementer ved hjælp af JavaScript:

eksempel

tildeles til button-elementet onclick begivenhed:

<script>
document.getElementById("myBtn").onclick = displayDate;
</script>

Prøv det selv

I det foregående eksempel er funktionen med navnet displayDate tildelt til HTML-elementet med id="myBtn".

når der klikkes på knappen, vil funktionen blive udført.

onload og onunload begivenheder

Når brugeren kommer ind på og forlader siden, udløses onload og onunload begivenhed.

onload begivenhed kan bruges til at detektere besøgendes browser-type og browserversion, og derefter indlæse den passende version af websiden baseret på denne information.

onload og onunload begivenhed kan bruges til at håndtere cookies.

eksempel

<body onload="checkCookies()">

Prøv det selv

onchange begivenhed

onchange begivenheder bruges ofte i kombination med inputfeltvalidering.

Her er et eksempel på, hvordan man bruger onchange Når brugeren ændrer indholdet i inputfeltet, kalder det upperCase() funktionen.

eksempel

<input type="text" id="fname" onchange="upperCase()">

Prøv det selv

onmouseover og onmouseout begivenheder

onmouseover og onmouseout hændelser kan bruges til at udløse en funktion, når brugeren flytter musen til eller fra et HTML-element:

Mus kommer tættere på!

Prøv det selv

onmousedown, onmouseup og onclick-hændelser

onmousedown, onmouseup og onclick hændelsen udgør den fulde museklikshændelse.

først når museknappen klikkes:onmousedown hændelsen udløses; derefter, når museknappen frigives:onmouseup hændelsen udløses; sidst, når museklikket er fuldført:onclick hændelsen udløses.

Klik mig

Prøv det selv

Flere eksempler

onmousedown og onmouseup
ændrer billedet, når brugeren trykker på museknappen.
onload
viser en advarselsboks, når siden er færdig med at indlæse.
onfocus
ændrer baggrundsfarven, når inputfeltet får fokus.
Musehændelser
ændrer farven, når pegefaden flyttes til elementet.

HTML DOM Event-objekt referencerhåndbog

For at få en fuld liste over HTML DOM-hændelser, besøg vores komplette HTML DOM Event-objekt referencerhåndbog.