HTML DOM tillåter JavaScript att reagera på HTML-händelser:
En JavaScript kan köras när en händelse inträffar, som när en användare klickar på ett HTML-element.
För att köra kod när en användare klickar på ett element, lägg till JavaScript-kod till ett HTML-händelseattribut:
onclick=JavaScript
Exempel på HTML-händelser:
När en användare klickar med musen
När en webbsida har laddats
När en bild har laddats
När musen rör sig över ett element
När ett inmatningsfält ändras
När ett HTML-formulär skickas
När en användare trycker på en tangent
I det här exemplet ändras innehållet i elementet ><h1>
när en användare klickar på det:
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML = 'Ooops!'">Click on this text!</h1>
</body>
</html>
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML Events</h2>
<h2 onclick="this.innerHTML='Ooops!'">Click on this text!</h2>
</body>
</html>
I det här exemplet anropas en funktion från händelsehanteraren:
<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">Click on this text!</h1>
<script>
function changeText(id) {
id.innerHTML = "Ooops!";
}
</script>
</body>
</html>
Prova själv →
<!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>
För att tilldela händelser till HTML-element kan du använda händelseattribut.
Tilldela en onclick-händelse till ett knappelement:
<button onclick="displayDate()">Try it</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>
I exemplet ovan kommer en funktion med namnet displayDate
att exekveras när knappen klickas.
HTML DOM låter dig tilldela händelser till HTML-element med hjälp av JavaScript:
Tilldela en onclick-händelse till ett knappelement:
<script>
document.getElementById("myBtn").onclick = displayDate;
</script>
Prova själv →
<!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 exemplet ovan är en funktion med namnet displayDate
tilldelad till ett HTML-element med id="myBtn"
.
Funktionen kommer att köras när knappen klickas.
Händelserna onload
och onunload
utlöses när användaren går in på eller lämnar sidan.
Händelsen onload
kan användas för att kontrollera besökarens webbläsartyp och webbläsarversion, och ladda den korrekta versionen av webbsidan baserat på informationen.
Händelserna onload
och onunload
kan användas för att hantera cookies.
<body onload="checkCookies()">
Prova själv →
<!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
används ofta i kombination med validering av inmatningsfält.
Nedan är ett exempel på hur man använder onchange. upperCase()
funktionen kommer att anropas när en användare ändrar innehållet i ett inmatningsfält.
<input type="text" id="fname"
onchange="upperCase()">
Prova själv →
<!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ändelserna onmouseover
och onmouseout
kan användas för att utlösa en funktion när användaren för musen över eller utanför ett HTML-element:
Prova själv →
<!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>
Händelserna onmousedown
, onmouseup
och onclick
är alla delar av en musklick. Först när en musknapp klickas, är onmousedown-händelsen utlöses då när musknappen släpps, utlöses onmouseup-händelsen, slutligen, när musklicket är slutfört, utlöses onclick-händelsen.
Prova själv →
<!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 och 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>
Ändra en bild när en användare håller ner musknappen.
ladda
<!DOCTYPE html>
<html>
<head>
<script>
function mymessage() {
alert("This message was triggered from the onload event");
}
</script>
</head>
<body onload="mymessage()">
</body>
</html>
Visa en varningsruta när sidan har laddats klart.
på 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>
Ändra bakgrundsfärgen för ett inmatningsfält när det får fokus.
Mouse Events
<!DOCTYPE html>
<html>
<body>
<h1 onmouseover="style.color='red'"
onmouseout="style.color='black'">
Mouse over this text</h1>
</body>
</html>
Ändra färgen på ett element när markören flyttas över det.
För en lista över alla HTML DOM-händelser, titta på vår fullständiga HTML DOM Event Object Reference.