HTML DOM tillader JavaScript at reagere på HTML-hændelser:
En JavaScript kan udføres, når en hændelse opstår, som når en bruger klikker på et HTML-element.
For at udføre kode, når en bruger klikker på et element, skal du tilføje JavaScript-kode til en HTML-hændelsesattribut:
onclick=JavaScriptEksempler på HTML-begivenheder:
Når en bruger klikker med musen
Når en webside er indlæst
Når et billede er blevet indlæst
Når musen bevæger sig hen over et element
Når et indtastningsfelt ændres
Når en HTML-formular indsendes
Når en bruger trykker på en tast
I dette eksempel ændres indholdet af ><h1>-elementet, når en bruger klikker på det:
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML = 'Ooops!'">Click on this text!</h1>
</body>
</html>Prøv det selv →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML Events</h2>
<h2 onclick="this.innerHTML='Ooops!'">Click on this text!</h2>
</body>
</html>
I dette eksempel kaldes en funktion fra hændelseshandleren:
<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">Click on this text!</h1>
<script>
function changeText(id) {
id.innerHTML = "Ooops!";
}
</script>
</body>
</html>Prøv det selv →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML Events</h2>
<h2 onclick="changeText(this)">Click on this text!</h2>
<script>
function changeText(id) {
id.innerHTML = "Ooops!";
}
</script>
</body>
</html>
For at tildele hændelser til HTML-elementer kan du bruge hændelsesattributter.
Tildel en onclick-hændelse til et knapelement:
<button onclick="displayDate()">Try it</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>
I eksemplet ovenfor vil en funktion ved navn displayDate blive udført når der trykkes på knappen.
HTML DOM giver dig mulighed for at tildele hændelser til HTML-elementer ved hjælp af JavaScript:
Tildel en onclick-hændelse til et knapelement:
<script>
document.getElementById("myBtn").onclick = displayDate;
</script>Prøv det selv →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML Events</h2>
<p>Click "Try it" to execute the displayDate() function.</p>
<button id="myBtn">Try it</button>
<p id="demo"></p>
<script>
document.getElementById("myBtn").onclick = displayDate;
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
</body>
</html>
I eksemplet ovenfor er en funktion ved navn displayDate tildelt til et HTML-element med id="myBtn".
Funktionen vil blive udført når der trykkes på knappen.
Hændelserne onload og onunload udløses, når brugeren går ind på eller forlader siden.
Hændelsen onload kan bruges til at kontrollere den besøgendes browsertype og browserversion og indlæse den korrekte version af websiden baseret på oplysningerne.
Hændelserne onload og onunload kan bruges til at håndtere cookies.
<body onload="checkCookies()">Prøv det selv →
<!DOCTYPE html>
<html>
<body onload="checkCookies()">
<h2>JavaScript HTML Events</h2>
<p id="demo"></p>
<script>
function checkCookies() {
var text = "";
if (navigator.cookieEnabled == true) {
text = "Cookies are enabled.";
} else {
text = "Cookies are not enabled.";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
Hændelsen onchange bruges ofte i kombination med validering af inputfelter.
Nedenfor er et eksempel på, hvordan du bruger onchange. upperCase() funktionen vil blive kaldt, når en bruger ændrer indholdet af et inputfelt.
<input type="text" id="fname"
onchange="upperCase()">Prøv det selv →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML Events</h2>
Enter your name: <input type="text" id="fname" onchange="upperCase()">
<p>When you leave the input field, a function is triggered which transforms the input text to upper case.</p>
<script>
function upperCase() {
const x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>
</body>
</html>
Hændelserne onmouseover og onmouseout kan bruges til at udløse en funktion, når brugeren bevæger musen over eller ud af et HTML-element:
Prøv det selv →
<!DOCTYPE html>
<html>
<body>
<div onmouseover="mOver(this)" onmouseout="mOut(this)"
style="background-color:#D94A38;width:120px;height:20px;padding:40px;">
Mouse Over Me</div>
<script>
function mOver(obj) {
obj.innerHTML = "Thank You"
}
function mOut(obj) {
obj.innerHTML = "Mouse Over Me"
}
</script>
</body>
</html>
Begivenhederne onmousedown, onmouseup og onclick er alle dele af en museklik. Først når der klikkes på en museknap, er onmousedown-begivenheden udløst, da, når museknappen frigives, udløses onmouseup-hændelsen, og endelig, når museklikket er afsluttet, udløses onclick-hændelsen.
Prøv det selv →
<!DOCTYPE html>
<html>
<body>
<div onmousedown="mDown(this)" onmouseup="mUp(this)"
style="background-color:#D94A38;width:90px;height:20px;padding:40px;">
Click Me</div>
<script>
function mDown(obj) {
obj.style.backgroundColor = "#1ec5e5";
obj.innerHTML = "Release Me";
}
function mUp(obj) {
obj.style.backgroundColor="#D94A38";
obj.innerHTML="Thank You";
}
</script>
</body>
</html>
onmousedown og onmouseup
<!DOCTYPE html>
<html>
<head>
<script>
function lighton() {
document.getElementById('myimage').src = "bulbon.gif";
}
function lightoff() {
document.getElementById('myimage').src = "bulboff.gif";
}
</script>
</head>
<body>
<img id="myimage" onmousedown="lighton()" onmouseup="lightoff()" src="bulboff.gif" width="100" height="180" />
<p>Click mouse and hold down!</p>
</body>
</html>
Skift et billede, når en bruger holder museknappen nede.
påfyldning
<!DOCTYPE html>
<html>
<head>
<script>
function mymessage() {
alert("This message was triggered from the onload event");
}
</script>
</head>
<body onload="mymessage()">
</body>
</html>
Vis en advarselsboks, når siden er færdig med at indlæse.
fokus
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(x) {
x.style.background = "yellow";
}
</script>
</head>
<body>
Enter your name: <input type="text" onfocus="myFunction(this)">
<p>When the input field gets focus, a function is triggered which changes the background-color.</p>
</body>
</html>
Skift baggrundsfarven på et inputfelt, når det får fokus.
Muse-begivenheder
<!DOCTYPE html>
<html>
<body>
<h1 onmouseover="style.color='red'"
onmouseout="style.color='black'">
Mouse over this text</h1>
</body>
</html>
Skift farven på et element, når markøren bevæger sig over det.
For en liste over alle HTML DOM hændelser, se vores komplette HTML DOM Event Object Reference.