Event-Handler
![[Bildschirmfoto]
Event-Handler](img/event_handler.png "[Bildschirmfoto]
Event-Handler")
Event-Handler, was so viel heißt wie "Ereignis-Behandler" ist kleiner JavaScript-Aufruf, 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!');">
<!-- Oder -->
<button type="button" onClick="alert('Hallo Welt!');">Hallo Welt</button>
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 lesbarer 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. |
| 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. | onWheel Führt Javascript-Code aus, wenn der Benutzer die Radtaste seiner Maus dreht. |
onInput: Führt Javascript-Code aus, wenn der Benutzer z.B.: einen Regler (<input type="range">). |
oninvalid: Führt Javascript-Code aus, wenn das Formularfeld nicht den Vorgaben entspricht (required, minlength, maxlength, pattern, etc.). |
Weitere Event-Handler
Hier sollten Sie die gängigen Browser testen, ob der gewählte Event-Handler damit funktioniert!
| onAbort | onError | |
| 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 |
| onWheel |
Pointer-Events
| onPointerCancel | onPointerDown | onPointerEnter |
| onPointerLeave | onPointerMove | onPointerOut |
| onPointerOver | onPointerUp |
Event-Handler mit JavaScript setzen
Event-Handler sollten nach Möglichkeit direkt mit JavaScript gesetzt werden.
• Dieses Beispiel setzt einen Event-Handler auf einem HTML-Button nachdem die Seite vollständig 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")) {
// 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>
document.getElementById("button").addEventListener("click", test);
Der Event-Handler wird im Script nicht mit: onclick sondern mit:
click gesetzt (also ohne das on
).
• Dieses Script wird nach dem Seiteninhalt aufgerufen und setzt einen Event-Handler auf einem HTML-Button.
<button type="button" id="button2">Klick mich 2!</button>
<script>
// HTML-Element über JavaScript eine Funktion zuweisen
// Überprüfen ob die ID (button2) auf der Seite vorhanden ist (Optional).
if (document.getElementById("button2")) {
// Der ID den Event-Handler 'click' hinzufügen,
// und die Funktion starten.
document.getElementById("button2").addEventListener("click", (e) => {
alert('Test 2!');
});
}
</script>
Diverse Beispiele
<script>
document.getElementById("button").addEventListener("click", test);
// Oder:
document.getElementById("button").addEventListener("mouseover", test);
document.getElementById("button").addEventListener("dblclick", test);
document.getElementById("eingabefeld").addEventListener("input", test);
document.getElementById("eingabefeld").addEventListener("focus", test);
document.getElementById("button").addEventListener("click", (e) => {
// ...
});
// Über den querySelector:
document.querySelector("#button").addEventListener("click", (e) => {
// ...
});
btn.addEventListener("click", function (e) {
e.stopPropagation();
//e.preventDefault();
console.log("Submit-Button geklickt");
});
// Als (externes) Script im HTML-Head Bereich
window.addEventListener("DOMContentLoaded", function() {
// ...
});
window.addEventListener("DOMContentLoaded", () => {
// ...
});
// jQuery
$(document).ready(function() {
// ...
});
// Als (externes) Script im HTML-Head Bereich
// Wird bereits aufgerufen wenn die Seite noch nicht
// vollständig geladen wurde!
window.addEventListener("load", function() {
// ...
});
</script>
Mehr unter: https://developer.mozilla.org/en-US/docs/Web/API/Event