JavaScript-händelser


Innehållsförteckning

    Visa innehållsförteckning


HTML-händelser är "saker" som händer med HTML-element.

När JavaScript används i HTML-sidor kan JavaScript "reagera" på dessa händelser.


HTML-händelser

En HTML-händelse kan vara något webbläsaren gör, eller något en användare gör.

Här är några exempel på HTML-händelser:

  • En HTML-webbsida har laddats färdigt

  • Ett HTML-inmatningsfält har ändrats

  • En HTML-knapp klickades

Ofta, när händelser inträffar, kanske du vill göra något.

JavaScript låter dig köra kod när händelser upptäcks.

HTML tillåter att attribut för händelsehanterare, med JavaScript-kod, läggs till i HTML-element.

Med enstaka citat:

<element
 event='some JavaScript'>

Med dubbla citattecken:

<element
 event="some JavaScript">

I följande exempel läggs ett onclick-attribut (med kod) till i en ><button> element:

Exempel

<button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button>

Prova själv →

<!DOCTYPE html>
<html>
<body>

<button onclick="document.getElementById('demo').innerHTML=Date()">The time is?</button>

<p id="demo"></p>

</body>
</html>

I exemplet ovan ändrar JavaScript-koden innehållet i elementet med id="demo".

I nästa exempel ändrar koden innehållet i sitt eget element (med denna.innerHTML):

Exempel

<button onclick="this.innerHTML = Date()">The time is?</button>

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML Events</h2>
<button onclick="this.innerHTML=Date()">The time is?</button>

</body>
</html>

JavaScript-kod är ofta flera rader lång. Det är vanligare att se händelseattribut som anropar funktioner:

Exempel

<button onclick="displayDate()">The time is?</button>

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML Events</h2>
<p>Click the button to display the date.</p>

<button onclick="displayDate()">The time is?</button>

<script>
function displayDate() {
  document.getElementById("demo").innerHTML = Date();
}
</script>

<p id="demo"></p>

</body>
</html> 


Vanliga HTML-händelser

Här är en lista över några vanliga HTML-händelser:

onchange

Ett HTML-element har ändrats

onclick

Användaren klickar på ett HTML-element

onmouseover

Användaren för musen över ett HTML-element

onmouseout

Användaren flyttar musen bort från ett HTML-element

onkeydown

Användaren trycker på en tangent på tangentbordet

onload

Webbläsaren har läst in sidan

Listan är mycket längre: W3Schools JavaScript Reference HTML DOM Events.


JavaScript-händelsehanterare

Händelsehanterare kan användas för att hantera och verifiera användarinmatning, användaråtgärder, och webbläsaråtgärder:

  • Saker som bör göras varje gång en sida laddas

  • Saker som bör göras när sidan är stängd

  • Åtgärd som ska utföras när en användare klickar på en knapp

  • Innehåll som bör verifieras när en användare matar in data

  • Och mer ...

Många olika metoder kan användas för att låta JavaScript fungera med händelser:

  • HTML-händelseattribut kan exekvera JavaScript-kod direkt

  • HTML-händelseattribut kan anropa JavaScript-funktioner

  • Du kan tilldela dina egna händelsehanterare funktioner till HTML-element

  • Du kan förhindra att händelser skickas eller hanteras

  • Och mer ...

Du kommer att lära dig mycket mer om händelser och händelsehanterare i HTML DOM-kapitlen.