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.
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:
<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
):
<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:
<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>
Här är en lista över några vanliga HTML-händelser:
Ett HTML-element har ändrats
Användaren klickar på ett HTML-element
Användaren för musen över ett HTML-element
Användaren flyttar musen bort från ett HTML-element
Användaren trycker på en tangent på tangentbordet
Webbläsaren har läst in sidan
Listan är mycket längre: W3Schools JavaScript Reference HTML DOM Events.
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.