JavaScript-DOM-Ereignisse


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen


Mit HTML DOM kann JavaScript auf HTML-Ereignisse reagieren:

Mouse Over Me
Click Me

Auf 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:

Beispiel

<!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:

Beispiel

<!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>


HTML-Ereignisattribute

Um HTML-Elementen Ereignisse zuzuweisen, können Sie Ereignisattribute verwenden.

Beispiel

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.


Weisen Sie Ereignisse mithilfe des HTML-DOM zu

Mit dem HTML-DOM können Sie mithilfe von JavaScript Ereignisse zu HTML-Elementen zuweisen:

Beispiel

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

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.

Beispiel

<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 onchange-Event

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.

Beispiel

<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 Onmouseover- und Onmouseout-Ereignisse

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:

Mouse Over Me

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

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.

Click Me

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> 

Mehr Beispiele

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.


HTML-DOM-Ereignisobjektreferenz

Eine Liste aller HTML-DOM-Ereignisse finden Sie in unserer vollständigen HTML-DOM-Ereignisobjektreferenz.