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!');">

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.
onKeyPress: Führt Javascript-Code aus, wenn der Benutzer eine Taste drückt oder gedrückt hält. (Veraltet/Deprecated) 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). oninvalid: Führt Javascript-Code aus, wenn das Formularfeld nicht den Vorgaben entspricht (required, minlength, maxlength, pattern, etc.).

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 (nur I.Explorer)
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

PointerEvents

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 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>

Der Aufruf wird im Script nicht mit: onclick sondern mit: click gesetzt (also ohne das on).

Diverse Beispiele:


<script>


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

btn.addEventListener("click", function (event) {
  
event.stopPropagation();
  
console.log("Button geklickt");
});

window.addEventListener("DOMContentLoaded", function() {
 
// ...
});

// jQuery
$(document).ready(function() {
 
// ...
});

</
script>

Mehr unter: https://developer.mozilla.org/en-US/docs/Web/API/Event