JavaScript HTML DOM händelser

HTML DOM tillåter JavaScript att reagera på HTML-händelser:

Musen är här!
Klicka mig

Reagera på händelser

JavaScript kan köra när ett händelse inträffar, till exempel när användaren klickar på ett HTML-element.

För att köra kod när användaren klickar på ett element, lägg till JavaScript-kod till HTML-händelsenegenskapen:

onclick=JavaScript

Exempel på HTML-händelser:

  • När användaren klickar på musen
  • när webbsidan laddas
  • när bilden laddas
  • när musen placeras på elementet
  • när inmatningsfältet ändras
  • när HTML-formuläret skickas in
  • när användaren trycker på en tangent

I detta exempel när användaren klickar på <h1> ändras dess innehåll:

Exempel

<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML = 'Hello!'">Klicka på denna text!</h1>
</body>
</html>

Prova själv

I detta exempel anropas funktionen från eventhanteraren:

Exempel

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

Prova själv

HTML-händelsesattribut

För att tilldela händelser till HTML-element kan du använda eventattribut.

Exempel

tilldela för knapp-elementet onclick händelser:

<button onclick="displayDate()">Prova</button>

Prova själv

I föregående exempel körs funktionen displayDate när knappen klickas.

Tilldela händelser med HTML DOM

HTML DOM låter dig använda JavaScript för att tilldela händelser till HTML-element:

Exempel

ange för knapp-elementet onclick händelser:

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

Prova själv

I föregående exempel tilldelas funktionen displayDate till HTML-elementet med id="myBtn".

när man klickar på en knapp utförs en funktion.

onload och onunload-händelser

När användaren kommer in och lämnar sidan utlöses onload och onunload händelser.

onload händelser kan användas för att detektera besökarens webbläsartyp och version, och sedan ladda rätt version av webbsidan baserat på denna information.

onload och onunload händelser kan användas för att hantera cookies.

Exempel

<body onload="checkCookies()">

Prova själv

onchange-händelse

onchange händelser används ofta tillsammans med validering av inmatningsfält.

Nedan är ett exempel på hur man använder onchange där användaren ändrar innehållet i inmatningsfältet triggar funktionen upperCase().

Exempel

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

Prova själv

onmouseover och onmouseout-händelser

onmouseover och onmouseout Händelser kan användas för att utlösa en funktion när användaren flyttar musen över eller ut från ett HTML-element:

Musen är här!

Prova själv

onmousedown, onmouseup och onclick-händelser

onmousedown, onmouseup och onclick Händelserna utgör den fullständiga musklickshändelsen.

Först när musknappen klickas:onmousedown Händelsen utlöses; sedan när musknappen släpps:onmouseup Händelsen utlöses; slutligen, när musklicket är klart:onclick Händelsen utlöses.

Klicka mig

Prova själv

Fler exempel

onmousedown och onmouseup
Ändra bilden när användaren trycker på musknappen.
onload
Visa en varningsruta när sidan är helt laddad.
onfocus
Ändra bakgrundsfärgen när inmatningsfältet får fokus.
Mus-händelser
Ändra färgen på elementet när pekfilen flyttas över det.

HTML DOM Event-objekt-referenshandbok

För en fullständig lista över alla HTML DOM-händelser, besök vår HTML DOM-händelseobjekt-referenshandbok.