suchen

Heim >Web-Frontend >js-Tutorial >Kenntnisse über JavaScript-HTML-DOM-Ereignisse

Kenntnisse über JavaScript-HTML-DOM-Ereignisse

jacklove
jackloveOriginal
2018-05-07 11:10:111176Durchsuche

JavaScript-HTML-DOM-Ereignisse spielen eine wichtige Rolle in js. Dieser Artikel bietet eine detaillierte Erläuterung des damit verbundenen Wissens.

Reagieren auf Ereignisse

Wir können JavaScript ausführen, wenn ein Ereignis eintritt, beispielsweise wenn ein Benutzer auf ein HTML-Element klickt.

Um Code auszuführen, wenn der Benutzer auf ein Element klickt, fügen Sie JavaScript-Code zu einem HTML-Ereignisattribut hinzu:

onclick=JavaScript

Beispiel für HTML-Ereignisse:

Wenn der Benutzer mit der Maus klickt

Wenn die Webseite geladen wurde

Wenn das Bild geladen wurde

Wenn sich die Maus über das Element bewegt

Wenn das Eingabefeld geändert wird

Wenn das HTML-Formular gesendet wird

Wenn der Benutzer einen Tastendruck auslöst

In diesem Fall, wenn der Benutzer auf das 4a249f0d628e2318394fd9b75b4636b1 Element, ändert seinen Inhalt:

Instanz

<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML=&#39;Ooops!&#39;">点击文本!</h1>
</body>
</html>

Dieses Beispiel ruft eine Funktion aus dem Ereignishandler auf:

Instanz

<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
    id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">点击文本!</h1>
</body>
</html>

HTML-Ereignisattribut

Um einem HTML-Element ein Ereignis zuzuweisen, können Sie das Ereignisattribut verwenden.

Weisen Sie das onclick-Ereignis dem Schaltflächenelement zu: 

<button onclick="displayDate()">点这里</button>

Im obigen Beispiel wird die Funktion mit dem Namen displayDate ausgeführt, wenn auf die Schaltfläche geklickt wird.

HTML-DOM zum Zuweisen von Ereignissen verwenden

HTML-DOM ermöglicht Ihnen die Verwendung von JavaScript zum Zuweisen von Ereignissen zu HTML-Elementen:

Onclick-Ereignisse zu Schaltflächenelementen zuweisen: 

<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>

Im obigen Beispiel wird die Funktion namens displayDate dem HTML-Element mit id="myBtn" zugewiesen. Die Javascript-Funktion wird ausgeführt, wenn auf die Schaltfläche

geklickt wird.

onload- und onunload-Ereignisse

onload- und onunload-Ereignisse werden ausgelöst, wenn der Benutzer die Seite betritt oder verlässt. Das

onload-Ereignis kann verwendet werden, um den Browsertyp und die Browserversion des Besuchers zu erkennen und anhand dieser Informationen die richtige Version der Webseite zu laden.

Die Ereignisse onload und onunload können zur Verarbeitung von Cookies verwendet werden.

Instanz

<body onload="checkCookies()">

onchange-Ereignis

onchange-Ereignis wird häufig in Verbindung mit der Validierung von Eingabefeldern verwendet.

Hier ist ein Beispiel für die Verwendung von onchange. Wenn der Benutzer den Inhalt des Eingabefelds ändert, wird die Funktion UpperCase() aufgerufen.

Instanzen

<input type="text" id="fname" onchange="upperCase()">

onmouseover- und onmouseout-Ereignisse

Die onmouseover- und onmouseout-Ereignisse können verwendet werden, um Funktionen auszulösen, wenn sich die Maus des Benutzers über oder aus einem HTML-Element bewegt.

onmousedown-, onmouseup- und onclick-Ereignisse

onmousedown, onmouseup und onclick bilden alle Teile des Mausklickereignisses. Zuerst wird beim Klicken auf die Maustaste das Ereignis „onmousedown“ ausgelöst, beim Loslassen der Maustaste wird das Ereignis „onmouseup“ ausgelöst und schließlich, wenn der Mausklick abgeschlossen ist, wird das Ereignis „onclick“ ausgelöst.

Dieser Artikel enthält einige Informationen zu DOM-Ereignissen. Weitere Lernmaterialien finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Verwandte Kenntnisse und Anwendung von JavaScript-Funktionsaufrufen

Verständnis und Verwendung von JavaScript-Timing-Ereignissen

JavaScript-Cookies verstehen und verwenden

Das obige ist der detaillierte Inhalt vonKenntnisse über JavaScript-HTML-DOM-Ereignisse. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Kenntnisse und Anwendung von JavaScript-FunktionsaufrufenNächster Artikel：Kenntnisse und Anwendung von JavaScript-Funktionsaufrufen

In Verbindung stehende Artikel

Mehr sehen