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...
});