HTML-hændelser er "ting", der sker med HTML-elementer.
Når JavaScript bruges i HTML-sider, kan JavaScript "reager" på disse begivenheder.
En HTML-begivenhed kan være noget browseren gør, eller noget en bruger gør.
Her er nogle eksempler på HTML-begivenheder:
En HTML-webside er færdig med at blive indlæst
Et HTML-indtastningsfelt blev ændret
Der blev klikket på en HTML-knap
Ofte, når der sker begivenheder, vil du måske gerne gøre noget.
JavaScript giver dig mulighed for at udføre kode, når hændelser opdages.
HTML gør det muligt at tilføje hændelseshandlerattributter med JavaScript-kode til HTML-elementer.
Med enkelte citater:
<element
event='some JavaScript'>Med dobbelte anførselstegn:
<element
event="some JavaScript">I det følgende eksempel føjes en onclick-attribut (med kode) til en ><button> element:
<button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button>Prøv det selv →
<!DOCTYPE html>
<html>
<body>
<button onclick="document.getElementById('demo').innerHTML=Date()">The time is?</button>
<p id="demo"></p>
</body>
</html>
I eksemplet ovenfor ændrer JavaScript-koden indholdet af elementet med id="demo".
I det næste eksempel ændrer koden indholdet af sit eget element (ved hjælp af dette.innerHTML):
<button onclick="this.innerHTML = Date()">The time is?</button>Prøv det selv →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML Events</h2>
<button onclick="this.innerHTML=Date()">The time is?</button>
</body>
</html>
JavaScript-kode er ofte flere linjer lang. Det er mere almindeligt at se hændelsesattributter kalder funktioner:
<button onclick="displayDate()">The time is?</button>Prøv det selv →
<!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>
Her er en liste over nogle almindelige HTML-begivenheder:
Et HTML-element er blevet ændret
Brugeren klikker på et HTML-element
Brugeren bevæger musen hen over et HTML-element
Brugeren flytter musen væk fra et HTML-element
Brugeren trykker på en tastaturtast
Browseren er færdig med at indlæse siden
Listen er meget længere: W3Schools JavaScript Reference HTML DOM Events.
Hændelseshandlere kan bruges til at håndtere og verificere brugerinput, brugerhandlinger, og browserhandlinger:
Ting, der bør gøres, hver gang en side indlæses
Ting, der bør gøres, når siden er lukket
Handling, der skal udføres, når en bruger klikker på en knap
Indhold, der skal verificeres, når en bruger indtaster data
Og mere ...
Mange forskellige metoder kan bruges til at lade JavaScript arbejde med begivenheder:
HTML-hændelsesattributter kan udføre JavaScript-kode direkte
HTML-hændelsesattributter kan kalde JavaScript-funktioner
Du kan tildele dine egne hændelseshåndteringsfunktioner til HTML-elementer
Du kan forhindre begivenheder i at blive sendt eller håndteret
Og mere ...
Du vil lære meget mere om hændelser og hændelseshandlere i HTML DOM kapitlerne.