Event Handler / HTML oder Javascript


Es gibt HTML Eventhandler und Javascript Eventhandler. HTML Eventhandler werden wie jedes andere Attribut in einem Anfangstag aufgeführt. Sie haben selbstsprechende Namen wie onclick, onmouseover, onmouseout, onload etc. Nach jedem Attribut erfolgt ein Gleichheitszeichen dann folgt in der Regel der Aufruf einer Funktion vorzugsweise in Anführungsstrichen.

HTML Event

<button onclick="myFunction()">Klick</button>

Diese Art von Event hat mehrere Nachteile. Zum einen ist es langsamer, zum anderen hat man keine Trennung von Funktionalität und Struktur. HTML soll lediglich die Struktur und Semantik einer Seite definieren. Desweiteren gibt es mehr Javascript Eventhandler und man hat mehr Möglichkeiten.

Folgendes Beispiel zeigt einen Javascript Eventhandler mit einem Verweis auf eine Funktion siehe auch Referenzen auf Funktionen

Javascript Event

<script>

document.getElementById("schalter").onclick = lichtan;

</script>

 

Event-Handler

Funktionen kann man mit einem Event-Handler aufrufen, in diesem Beispiel mit einem Button.
<form> <input type="button" value="Hallo" onClick="hallo()"></form>
anderes Beispiel beim Laden einer Seite:
<body onLoad="hallo()" >
noch ein Beispiel in einem Link:
<a href="#" onMouseover="hallo()">Text</a>

Die wichtigsten Event-Handler

Event Handler Ereignis auf das reagiert wird
onLoad Laden eines Objekts (z.B. Grafik, Seite)
onAbort Abbruch des Ladens einer Seite
onClick Anklicken eines Objekts (z.B. Schaltfläche)
onDbclick Doppelklick auf ein Objekt
onMouseover Cursor bewegt sich über ein Objekt (Grafik)
onMouseout Cursor bewegt sich vom Objekt weg
onFocus Objekt wird zum aktiven Objekt
onChange Objekt (Formularinhalt) wird geändert
onSelect Objekt (Text) wird ausgewählt (markiert)
onBlur Objekt wird verlassen
onSubmit Formularinhalt wird abgeschickt
onUnLoad Anwender verlässt das Fenster
onError Skriptfehler
   

 


Javascript Tipps