Event / HTML vs Javascript
Ereignis gesteuerte Programmierung benötigt:
- Ein Element welches auf Benutzerinteraktion reagieren soll
- Ein Ereigns / Event beispielsweise Mausklick
- Eine Funktion, die ausgeführt, wenn das Ereignis eintritt
Es gibt HTML Event und Javascript Event.
HTML Event-Handler
<button onclick="myFunction()">Klick</button>
HTML Events werden als Html Attribut in einem Anfangstag aufgeführt. Die Attribute 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.
Diese Art von Event hat den Nachteil dass man keine Trennung von Funktionalität und Struktur hat. HTML soll lediglich die Struktur und Semantik einer Seite definieren. Desweiteren gibt es mehr Javascript Eventhandler und man hat mehr Möglichkeiten. Diese Art sollte man nicht einsetzen.
Dom Event-Handler
Folgendes Beispiel zeigt einen DOM Eventhandler mit einem Verweis auf eine Funktion siehe auch Referenzen auf Funktionen oder man übergibt eine namenlose Funktion.
Der Vorteil ist, dass HTML und Javascript getrennt sind. Es gibt jedoch den Nachteil, dass man nur eine Funktion auf ein Ergnis registrieren kann.
<script>
document.getElementById("schalter").onclick = lichtan;
</script>
Dom Event- Listener
<script>
let but1 = document.getElementById('redButton');
but1.addEventListener('click', myFunction);
but1.addEventListener('click', showAlert);
</script>
Dom Event Listener sind die bevorzugte Methode für die Ereignisbehandlung. Hier kann man mehrere Funktionen für ein einzelnes Ereignis definieren.
Event-Handler / Event-Listener
Die Begriffe Event-Handler und Event-Listener werden oft synonym verwendet. Es ist jedoch so, dass eine Funktion die als HTML- Event Handler oder als DOM- Event Handler definiert wurde Event-Handler heißt. Eine Funktion die als Event-Listener registriert wurde nennt man dann auch Event-Listener.
Die wichtigsten Events
Es gibt verschiedene Event Arten, beispielsweise Mouseevents aber auch Events, die das Ladeverhalten überprüfen und mehr. Nutzt man diese Events in EventListenern werden sie ohne das on notiert aus onClick wird click;
| Events | 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) |
| onDblclick | 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 |
