Mit HTML DOM kann JavaScript auf HTML-Ereignisse reagieren:
Ein JavaScript kann ausgeführt werden, wenn ein Ereignis eintritt, beispielsweise wenn ein Benutzer auf ein HTML-Element klickt.
Um Code auszuführen, wenn ein Benutzer auf ein Element klickt, fügen Sie JavaScript-Code zu einem HTML-Ereignisattribut hinzu:
onclick=JavaScript
Beispiele für HTML-Ereignisse:
Wenn ein Benutzer mit der Maus klickt
Wenn eine Webseite geladen wurde
Wenn ein Bild geladen wurde
Wenn die Maus über ein Element bewegt wird
Wenn ein Eingabefeld geändert wird
Wenn ein HTML-Formular gesendet wird
Wenn ein Benutzer eine Taste drückt
In diesem Beispiel wird der Inhalt des Elements <h1>
geändert, wenn ein Benutzer darauf klickt:
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML = 'Ooops!'">Click on this text!</h1>
</body>
</html>
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML Events</h2>
<h2 onclick="this.innerHTML='Ooops!'">Click on this text!</h2>
</body>
</html>
In diesem Beispiel wird eine Funktion vom Event-Handler aufgerufen:
<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">Click on this text!</h1>
<script>
function changeText(id) {
id.innerHTML = "Ooops!";
}
</script>
</body>
</html>
Probieren Sie es selbst aus →
<!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>
Um HTML-Elementen Ereignisse zuzuweisen, können Sie Ereignisattribute verwenden.
Weisen Sie einem Schaltflächenelement ein Onclick-Ereignis zu:
<button onclick="displayDate()">Try it</button>
Probieren Sie es selbst aus →
<!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>
Im obigen Beispiel wird eine Funktion namens displayDate
ausgeführt wenn auf die Schaltfläche geklickt wird.
Mit dem HTML-DOM können Sie mithilfe von JavaScript Ereignisse zu HTML-Elementen zuweisen:
Weisen Sie einem Schaltflächenelement ein Onclick-Ereignis zu:
<script>
document.getElementById("myBtn").onclick = displayDate;
</script>
Probieren Sie es selbst aus →
<!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>
Im obigen Beispiel wird eine Funktion mit dem Namen displayDate
zugewiesen ein HTML-Element mit der id="myBtn"
.
Die Funktion wird ausgeführt wenn auf die Schaltfläche geklickt wird.
Die Ereignisse onload
und onunload
werden ausgelöst, wenn der Benutzer die Seite betritt oder verlässt.
Das Ereignis onload
kann verwendet werden, um den Browsertyp und die Browserversion des Besuchers zu überprüfen und anhand der Informationen die richtige Version der Webseite zu laden.
Die Ereignisse onload
und onunload
können zum Umgang mit Cookies verwendet werden.
<body onload="checkCookies()">
Probieren Sie es selbst aus →
<!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>
Das Ereignis onchange
wird häufig in Kombination mit der Validierung von Eingabefeldern verwendet.
Nachfolgend finden Sie ein Beispiel für die Verwendung von onchange. Der upperCase()
Die Funktion wird aufgerufen, wenn ein Benutzer den Inhalt eines Eingabefelds ändert.
<input type="text" id="fname"
onchange="upperCase()">
Probieren Sie es selbst aus →
<!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>
Die Ereignisse onmouseover
und onmouseout
können verwendet werden, um eine Funktion auszulösen, wenn der Benutzer mit der Maus klickt über oder außerhalb eines HTML-Elements:
Probieren Sie es selbst aus →
<!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>
Die Ereignisse onmousedown
, onmouseup
und onclick
sind alle Teile von a Mausklick. Wenn eine Maustaste angeklickt wird, tritt zunächst das onmousedown-Ereignis auf Wird dann ausgelöst, wenn die Maustaste gedrückt wird Wird losgelassen, wird das onmouseup-Ereignis ausgelöst. Wenn der Mausklick abgeschlossen ist, wird schließlich das onclick-Ereignis ausgelöst.
Probieren Sie es selbst aus →
<!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 und 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>
Ändern Sie ein Bild, wenn ein Benutzer die Maustaste gedrückt hält.
laden
<!DOCTYPE html>
<html>
<head>
<script>
function mymessage() {
alert("This message was triggered from the onload event");
}
</script>
</head>
<body onload="mymessage()">
</body>
</html>
Zeigt ein Warnfeld an, wenn die Seite vollständig geladen wurde.
im 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>
Ändern Sie die Hintergrundfarbe eines Eingabefelds, wenn es den Fokus erhält.
Mausereignisse
<!DOCTYPE html>
<html>
<body>
<h1 onmouseover="style.color='red'"
onmouseout="style.color='black'">
Mouse over this text</h1>
</body>
</html>
Ändern Sie die Farbe eines Elements, wenn der Cursor darüber bewegt wird.
Eine Liste aller HTML-DOM-Ereignisse finden Sie in unserer vollständigen HTML-DOM-Ereignisobjektreferenz.