Ereignisse

Was sind Ereignisse?

Ereignisse (engl. Events) treten ein, wenn Benutzer auf Webseiten bestimmte Aktionen ausführen, wie z. B. das Klicken eines Button. Mit Ereignissen können Webseiten interaktiv gemacht werden, damit sie auf Benutzeraktionen reagieren können. Führt ein Benutzer eine Aktion aus, tritt ein entsprechendes Ereignis ein. Das Ereignis startet dann einen bestimmten dafür vorgesehenen JavaScript-Code.

Häufig auf Webseiten verwendete Ereignisse sind u. a.:

  • onClick: Klick auf ein HTML-Element
  • onChange: Ändern eines Form-Elements
  • onMouseOver: Mausezeiger wird über ein HTML-Element bewegt
  • onMouseOut: Mauszeiger verlässt ein HTML-Element
  • onKeyDown: Eine Taste wird gedrückt
  • onKeyUp: Eine Taste wird wieder losgelassen

Hinweis: Eine vollständige Liste der Ereignisse gibt es auf der Seite „HTML DOM Events“ bei „w3schools.com“!

„onClick“-Ereignis

Das „onClick“-Ereignis tritt ein, wenn ein HTML-Element angeklickt wird. Das Ereignis kann dabei für fast alle HTML-Elemente und nicht nur für Button verwendet werden:

HTML-Datei:

Ergebnis:

Beispiel 1




Überschrift 1

Absatz-Element

„onChange“-Ereignis

Das „onChange“-Ereignis tritt ein, wenn der Inhalt eines Form-Elements verändert wird. Das „onChange“-Ereignis kann mit den Elementen „input“, „select“ und „textarea“ verwendet werden:

HTML-Datei:

Ergebnis:

Beispiel 2





„onMouseOver“-Ereignis

Das Ereignis „onMouseOver“ tritt ein, wenn der Mauszeiger über ein HTML-Element bewegt wird. Das Ereignis kann dabei für fast alle HTML-Elemente verwendet werden:

HTML-Datei:

Ergebnis:

Beispiel 3




Überschrift 1

Absatz-Element

„onMouseOut“-Ereignis

Das Ereignis „onMouseOut“ tritt ein, wenn der Mauszeiger wieder von einem HTML-Element wegbewegt wird. Das Ereignis kann ebenfalls für fast alle HTML-Elemente verwendet werden:

HTML-Datei:

Ergebnis:

Beispiel 4




Überschrift 1

Absatz-Element

„onKeyDown“- und „onKeyUp“-Ereignis

Das Ereignis „onKeyDown“ tritt ein, wenn in einem Text-Element („input“ oder „textarea“) eine Taste gedrückt wird. Das Ereignis „onKeyUp“ tritt ein, wenn eine gedrückte Taste wieder losgelassen wird:

HTML-Datei:

Ergebnis:

Beispiel 5



Abschlussübung

Als Abschlussübung kannst du folgende Webseite erstellen, bei der verschiedene Angaben zur Person augefüllt werden müssen. Alle Elemente sind dabei Pflichtfelder, die einen roten Rahmen haben. Werden die entsprechenden Angaben gemacht, verschwindet der rote Rahmen. Wurden alle Angaben gemacht erscheint zusätzlich ein Button zum senden. Wird der Button betätigt, werden alle Felder wieder zurückgesetzt:

Beispiel 6

Geschlecht: weiblich
männlich

Gehe dabei wie folgt vor:

  • Erstelle zwei Text-Elemente und zwei Radio-Button
  • Gebe den Text-Elementen und den Radio-Button per CSS einen roten Rahmen
    (border: 1px solid red)

  • Blende den Button per CSS aus (display: none;)

  • Gebe den beiden Text-Elementen ein „onChange“-Ereignis, das auf die selbe Funktion verweist

  • Übergebe der Funktion mit „this“ das aktuelle Text-Element

  • Prüfe in der Funktion ob das aktuelle Text-Element nicht leer ist (...value != „“)

  • Wenn das aktulle Text-Element nicht leer ist, gebe dem Element einen schwarzen Rahmen
    (el.style.border = „1px solid red“;)

  • Wenn das aktuelle Text-Element leer ist, gebe dem Element einen roten Rahmen

  • Gebe den beiden Radio-Button ebenfalls ein „onChange“-Ereignis das auf eine zweite Funktion verweist

  • Prüfe in der zweiten Funktion, ob einer der Radio-Button auf aktiv ist (el.checked)

  • Entferne den Rahmen der Radio-Button, wenn einer der Radio-Button aktiv ist
    (el.style.border = „none“;)

  • Wenn keiner der beiden Radio-Button aktiv ist, gebe beiden Radio-Button einen roten Rahmen

  • Erstelle eine dritte Funktion, in der geprüft wird, ob beide Textelemente nicht leer und einer der Radio-Button aktiv ist

  • Ist die Bedingung erfüllt, blende den Button ein (btn.style.display = „inline“;)

  • Ist die Bedingung nicht erfüllt, blende den Button aus (btn.style.display = „none“;)

  • Rufe die dritte Funktion am ende der ersten und zweiten Funktion auf

  • Gebe den Button das „onClick“-Ereignis, das eine vierte Funktion aufruft

  • Setze in der vierten Funktion alle Elemente auf den Ausgangszustand zurück

Die Lösung kannst du dir hier herunterladen:

Download
Events6.html
HTML Dokument 2.7 KB

Quellen