Event Handler
Event-Handler, was so viel heißt wie "Ereignis-Behandler" ist kleiner JavaScript- Code, den Sie innerhalb von HTML-Tags als Attribut platzieren. Treten bestimmte Ereignisse ein wie ein Mausklick oder Tastendruck, leitet ein Event-Handler bestimmte Aktionen ein.
Beispiel:
<input type="button" value="Hallo Welt" onClick="alert('Hallo Welt!');">
Liste der Event Handler
Die Groß.- und Kleinschreibung ist bei den folgenden Attributen egal, häufig wird die „Camel-Case”-Schreibweise eingesetzt.
Diese wird einfach verwendet, um lange Namen / Bezeichner übersichtlicher zu gestalten onmousemove > onMouseMove.
| onAbort: Führt Javascript-Code aus, wenn der Benutzer eine Aktion abbricht. | onBlur: Führt Javascript-Code aus, wenn ein Element einer Webseite den Fokus verliert, zum Beispiel ein Formular, ein Fenster oder Frame. | onChange: Führt Javascript-Code aus, wenn ein Eingabefeld den Fokus verliert. |
| onClick: Führt Javascript-Code aus, wenn der Benutzer ein Formular-Element auf der Webseite anklickt. | onDblClick: Führt Javascript-Code aus, wenn der Benutzer ein Formular-Element doppelt anklickt | onDragdrop: Führt Javascript-Code aus, wenn der Benutzer ein Objekt in das Fenster seines Browsers zieht und dort fallen lässt. |
| onError: Führt Javascript-Code aus, wenn ein Ladevorgang, etwa eines Bildes, einen Fehler verursacht. | onFocus: Führt Javascript-Code aus, wenn ein Element den Fokus erhält. | onKeydown: Führt Javascript-Code aus, wenn der Benutzer eine Taste drückt. |
| onKeypress: Führt Javascript-Code aus, wenn der Benutzer eine Taste drückt oder gedrückt hält. | onKeyup: Führt Javascript-Code aus, wenn der Benutzer eine gedrückte Taste wieder loslässt. | onResize: Führt Javascript-Code aus, wenn der Benutzer die Größe eines Fensters oder Frames verändert. |
| onLoad: Führt Javascript-Code aus, der Browser ein Dokument geladen hat. | onMousedown: Führt Javascript-Code aus, wenn der Benutzer eine Maustaste drückt. | onMousemove: Führt Javascript-Code aus, wenn der Benutzer den Mauszeiger auf der Webseite bewegt. |
| onMouseout: Führt Javascript-Code aus, wenn der Mauszeiger einen aktiven Bereich verlässt. | onMouseover: Führt Javascript-Code aus, wenn der Benutzer den Mauszeiger über ein entsprechendes Element bewegt. | onMouseup: Führt Javascript-Code aus, wenn der Benutzer die gedrückte Maustaste wieder loslässt. |
| onMove: Führt Javascript-Code aus, wenn der Benutzer ein Fenster oder einen Frame bewegt. | onReset: Führt Javascript-Code aus, wenn der Benutzer ein Formular zurücksetzt. | onSelect: Führt Javascript-Code aus, wenn der Benutzer einen Bereich markiert. |
| onSubmit: Führt Javascript-Code aus, wenn der Benutzer ein Formular abschickt. | onUnload: Führt Javascript-Code aus, wenn der Benutzer ein Dokument verlässt. | OnMouseWheel Führt Javascript-Code aus, wenn der Benutzer die Radtaste seiner Maus dreht. (nur I. Explorer) |
onInput: Führt Javascript-Code aus, wenn der Benutzer z.B.: einen Regler (<input type="range">) betätigt (HTML 5). |
Die Standard HTML 5 Event-Handler
Hier sollten Sie die gängigen Browser testen, ob der gewählte Event-Handler damit funktioniert!
| onAbort | onError * | onMouseWheel (IE) |
| onBlur * | onFocus * | onPause |
| onCanPlay | onFormChange | onPlay |
| onCanPlayThrough | onFormInput | onPlaying |
| onChange | onInput | onProgress |
| onClick | onInvalid | onRateChange |
| onContextMenu | onKeyDown | onReadyStateChange |
| onDblClick | onKeyPress | onScroll |
| onDrag | onKeyUp | onSeeked |
| onDragend | onLoad * | onSeeking |
| onDragEnter | onLoadedData | onSelect |
| onDragLeave | onLoadedMetadata | onShow |
| onDragOver | onLoadStart | onStalled |
| onDragStart | onMouseDown | onSubmit |
| onDrop | onMouseMove | onSuspend |
| onDurationChange | onMouseOut | onTimeUpdate |
| onEmptied | onMouseOver | onVolumeChange |
| onEnded | onMouseUp | onWaiting |
Event-Handler setzen mit JavaScript
Event-Handler sollten nach Möglichkeit direkt mit JavaScript gesetzt werden.
Dieses Beispiel setzt einen Event-Handler auf einem HTML-Button nachdem die Seite geladen wurde.
<script>
// HTML-Element über JavaScript eine Funktion zuweisen
// Funktion beim laden der Seite aufrufen
window.addEventListener("DOMContentLoaded", function() {
// Überprüfen ob die ID (Button) auf der Seite vorhanden ist (Optional).
if (document.getElementById("button") != null) {
// Der ID den Event-Handler 'click' hinzufügen,
// als Event die Funktion 'test' aufrufen.
document.getElementById("button").addEventListener("click", test);
}
});
function test() {
alert('Test!');
}
</script>
<button type="button" id="button">Klick mich!</button>
Der Aufruf wird in JavaScript nicht mit: 'onclick' sondern mit:
'click' gesetzt (also ohne 'on').
document.getElementById("button").addEventListener("click", test);
// Oder:
document.getElementById("button").addEventListener("mouseover", test);
document.getElementById("button").addEventListener("change", test);
// Oder über den querySelector:
document.querySelector("#button").addEventLister("click", (e) => {
// hier weiterer Code...
});