HTML-DOM ermöglicht JavaScript in HTML-Ereignisse zu reagieren:
Als Reaktion auf Ereignisse
Ein JavaScript kann ausgeführt werden, wenn ein Ereignis eintritt, wie wenn ein Benutzer klickt auf ein HTML-Element.
Um Code auszuführen, wenn ein Benutzer auf ein Element klickt, fügen Sie JavaScript-Code in ein HTML-Ereignisattribut:
onclick=JavaScript
Beispiele für HTML-Ereignisse:
- Klickt ein Benutzer mit der Maus
- Wenn eine Web-Seite geladen
- Wenn ein Bild geladen wurde
- Wenn die Maus über ein Element
- Wenn ein Eingabefeld verändert
- Wenn ein HTML-Formular eingereicht
- Wenn streicht ein Benutzer eine Taste
In diesem Beispiel wird der Inhalt des <h1> ist Element geändert , wenn ein Benutzer darauf klickt:
Beispiel
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1>
</body>
</html>
Versuch es selber " In diesem Beispiel wird eine Funktion aus dem Ereignishandler 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>
Versuch es selber " HTML Ereignisattribute
So weisen Ereignisse auf HTML-Elemente können Sie Ereignisattribute verwenden.
Beispiel
ein Onclick-Ereignis einer Schaltfläche Element zuordnen:
<button onclick="displayDate()">Try it</button>
Versuch es selber " In dem obigen Beispiel eine Funktion mit dem Namen displayDate wird ausgeführt, wenn die Schaltfläche geklickt wird.
Weisen Sie Ereignisse mit dem HTML-DOM
Die HTML-DOM können Sie Ereignisse von HTML-Elementen zuweisen JavaScript verwenden:
Beispiel
ein Onclick-Ereignis einer Schaltfläche Element zuordnen:
<script>
document.getElementById("myBtn").onclick = displayDate;
</script>
Versuch es selber " In dem obigen Beispiel eine Funktion mit dem Namen displayDate ist mit einem HTML - Element zugeordnet mit dem id="myBtn" .
Die Funktion wird ausgeführt, wenn die Schaltfläche geklickt wird.
Die onload und onunload Veranstaltungen
Die onload und onunload Ereignisse ausgelöst werden , wenn der Benutzer betritt oder verlässt die Seite.
Das onload Ereignis kann verwendet werden , den Browser des Besuchers Typ und Browser - Version zu überprüfen, und laden Sie die richtige Version der Web - Seite auf der Grundlage der Informationen.
Die onload und onunload Ereignisse können mit Cookies umgehen verwendet werden.
Das onchange Ereignis
Das onchange Ereignis wird häufig in Kombination mit Validierung von Eingabefeldern verwendet.
Unten ist ein Beispiel dafür , wie die zu verwenden onchange . Die upperCase() Funktion wird aufgerufen, wenn ein Benutzer den Inhalt eines Eingabefeldes ändert.
Die onmouseover und onmouseout Veranstaltungen
Die onmouseover und onmouseout Ereignisse können verwendet werden , um eine Funktion auszulösen , wenn der Benutzer über mouses oder aus, ein HTML - Element:
Die onmousedown , onmouseup und onclick Events
Die onmousedown , onmouseup und onclick Ereignisse sind alle Teile eines Mausklick. Zuerst , wenn eine Maustaste angeklickt wird, das onmousedown Ereignis ausgelöst wird, dann, wenn die Maustaste losgelassen wird, das onmouseup Ereignis ausgelöst wird, schließlich, wenn der Mausklick abgeschlossen ist, wird das onclick wird Ereignis ausgelöst hat .
Mehr Beispiele
onmousedown und onmouseup
Bild wechseln, wenn ein Benutzer hält die Maustaste gedrückt.
onload
Zeigen Sie eine Warnmeldung, wenn die Seite fertig geladen ist.
im Fokus
Ändern Sie die Hintergrundfarbe von einem Eingabefeld, wenn es den Fokus erhält.
Mausereignisse
Ändern Sie die Farbe eines Elements, wenn der Cursor darüber bewegt.
HTML-DOM Event-Object Reference
Eine Liste aller Ereignisse HTML - DOM, einen Blick auf unsere komplette HTML - DOM Event - Objekt Referenz .