JavaScript HTML DOM-Ereignis
HTML-DOM JavaScript, HTML hat die Fähigkeit, auf Ereignisse zu reagieren.
Beispiele
Reagieren auf Ereignisse
Wir können JavaScript ausgeführt wird, wenn das Ereignis eintritt, wie zum Beispiel, wenn der Benutzer klickt auf das HTML-Element.
Um Code auszuführen, wenn ein Benutzer auf ein Element klickt, fügen Sie einen JavaScript-Code der 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 Sie ein HTML-Formular einreichen
- Wenn löst der Benutzer die Taste
In diesem Beispiel, wenn ein Benutzer auf das <h1> Element, wenn geklickt haben, wird der gesamte Inhalt zu ändern:
Beispiele
<Html>
<Body>
<H1 Onclick = "this.innerHTML = 'Ooops!'"> Klicken Sie auf den Text! </ H1>
</ Body>
</ Html>
Versuchen »
In diesem Fall ist eine Funktion aus der Event-Handler zu nennen:
Beispiele
<Html>
<Head>
<Script>
Funktion changetext (id)
{
id.innerHTML = "Ooops!";
}
</ Script>
</ Head>
<Body>
<H1 Onclick = "changetext (this)"> klicken Sie auf den Text! </ H1>
</ Body>
</ Html>
Versuchen »
HTML Ereignisattribute
So weisen Ereignisse Elemente HTML, können Sie die Ereignisattribute verwenden.
Beispiele
Zugeordnet zu dem Knopfelement Onclick-Ereignis:
Versuchen »
In dem obigen Beispiel, mit dem Namen der Funktion displayDate wird ausgeführt, wenn die Schaltfläche geklickt wird.
Verwenden Sie das HTML-DOM, um ein Ereignis zuordnen
HTML-DOM können Sie JavaScript verwenden, um Ereignisse zu HTML-Elementen zuzuordnen:
Beispiele
Zugeordnet zu dem Knopfelement Onclick-Ereignis:
. Document.getElementById ( "myBtn") Onclick = function () {displayDate ()};
</ Script>
Versuchen »
In dem obigen Beispiel wird die Funktion zu einer benannten displayDate id = myButn "HTML-Element zugeordnet.
Klicken Sie auf die Schaltfläche, wenn die Javascript-Funktion ausgeführt wird.
onload und onunload Veranstaltung
onload und onunload Ereignis ausgelöst wird, wenn der Benutzer betritt oder verlässt die Seite.
onload Ereignis kann den Browsertyp und Browser-Version verwendet werden, der Besucher erkannt wird, und auf der Grundlage dieser Informationen, um die richtige Version der Seite zu laden.
onload und onunload Ereignis kann verwendet werden, Cookies zu behandeln.
onchange Ereignis
onchange Ereignis oft kombiniert Eingabefeld Validierung zu verwenden.
Hier ist ein Beispiel dafür, wie die Onchange zu verwenden. Wenn der Benutzer den Inhalt des Eingabefeldes ändert, ruft Großschreibung () Funktion.
Onmouseover und onmouseout Veranstaltungen
Onmouseover und onmouseout Ereignisse können verwendet werden, um Funktionen auszulösen, wenn die Maus bewegt des Benutzers an die Spitze des HTML-Elements oder entfernt Elemente.
onmousedown, onmouseup und Onclick-Ereignis
onmousedown, onmouseup und Onclick bilden alle Teile der Mausklick-Ereignis. Erstens, wenn Sie die Maustaste klicken, wird der Auslöser onmousedown Ereignis, wenn die Maustaste losgelassen wird, wird es auslösen onmouseup Ereignis und schließlich, wenn der Abschluss eines Mausklicks, wird es das Onclick-Ereignis auslösen.
Beispiele
Eine einfache onmousedown-onmouseup Beispiel:
Weitere Beispiele
onmousedown und onmouseup
Wenn der Benutzer drückt die Maustaste, den Ersatz eines Bildes.
onload
Wenn die Seite fertig geladen ist, ein Meldungsfeld angezeigt werden soll.
onfocus
Wenn das Eingabefeld den Fokus hat, die Hintergrundfarbe ändern.
Mausereignisse
Wenn der Zeiger über das Element bewegt, ändert seine Farbe, wenn der Mauszeiger aus dem Text, wird seine Farbe wieder ändern.