HTML DOM-Ereignis
HTML-DOM ermöglicht es JavaScript-Ereignisse in HTML zu reagieren.
Beispiele
Reagieren auf Ereignisse
Wenn ein Ereignis eintritt, können Sie JavaScript, um auszuführen, wie wenn ein Benutzer klickt auf ein HTML-Element.
Um Code auszuführen, wenn ein Benutzer auf ein Element klickt, fügen Sie den JavaScript-Code in die HTML-Event-Attribute:
HTML Ereignis Beispiele:
- Klickt der Benutzer mit der Maus
- Wenn die Seite geladen
- Wenn das Bild loaded
- Wenn bewegt sich die Maus über das Element
- Wenn das Eingabefeld geändert
- Wenn die HTML-Formular eingereicht
- Wenn löst der Benutzer die Taste
In diesem Beispiel, wenn ein Benutzer klickt, wird es den Gehalt von <h1> Änderungselement:
Beispiele
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1>
</body>
</html>
Versuchen »
In diesem Fall wird die Funktion aus der Event-Handler aufgerufen werden:
Beispiele
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">Click on this text!</h1>
</body>
</html>
Versuchen »
HTML Ereignisattribute
So weisen Ereignisse Elemente HTML, können Sie die Ereignisattribute verwenden.
Beispiele
Zugeordnet zu dem Knopfelement ein Onclick-Ereignis:
Versuchen »
In dem obigen Beispiel, wenn die Schaltfläche geklickt wird, führt es die Funktion mit dem Namen displayDate.
Verwenden Sie das HTML-DOM, um ein Ereignis zuordnen
HTML DOM-Ereignis können Sie JavaScript verwenden, um HTML-Elemente zuweisen:
Beispiele
Onclick-Ereignis Taste Element zugeordnet:
document.getElementById("myBtn"). onclick =function(){ displayDate() };
</script>
Versuchen »
Im obigen Beispiel wird die Funktion mit dem Namen displayDate an die id = myButn "HTML-Element zugeordnet.
Wenn die Schaltfläche geklickt wird, wird die Funktion der Ausführung.
onload und onunload Veranstaltung
Wenn ein Benutzer betritt oder verlässt die Seite, wird es auslösen onload und onunload Ereignis.
onload Ereignis kann auf der Grundlage der Informationen Besucher Browser-Typ und die Version zu überprüfen, um zu laden, verschiedene Versionen einer Seite verwendet werden.
onload und onunload Ereignis für den Umgang mit Cookies.
onchange Ereignis
onchange Ereignis wird häufig verwendet, um das Eingabefeld zu validieren.
Das folgende Beispiel zeigt, wie Onchange zu verwenden. Wenn der Benutzer den Inhalt des Eingabefeldes verändert werden Großbuchstaben angezeigt () Funktion aufgerufen werden.
Onmouseover und onmouseout Veranstaltungen
Onmouseover und onmouseout Ereignisse können verwendet werden, um Funktionen auszulösen, wenn sich der Mauszeiger bewegt sich in die oder aus den Elementen.
onmousedown, onmouseup und Onclick-Ereignis
onmousedown, onmouseup Onclick-Ereignis ist ein Mausklick und der gesamte Prozess. Erstens, wenn eine Maustaste angeklickt wird, auslösen onmousedown Ereignis, und dann, wenn die Maustaste losgelassen wird, wird es auslösen onmouseup Ereignis und schließlich, wenn die Maus auf Fertig stellen klicken, wird das Onclick-Ereignis ausgelöst.
HTML-DOM Event-Object Reference
Für eine vollständige Beschreibung und Beispiele für jedes Ereignis, besuchen Sie bitte unsere HTML - DOM - Referenzhandbuch .