
Eventhandler |
| ID | Eventhandler | Beschreibung | Vermerk | Beispiel |
| 1 | onAbort | Führt Javascript-Code aus, wenn der Benutzer eine Aktion abbricht. | ||
| 2 | onClick | Führt Javascript-Code aus, wenn der Benutzer ein Formular-Element auf der Webseite anklickt. | document.getElementById("button").addEventListener("click", test); // Oder über den querySelector: document.querySelector("#button").addEventLister("click", (e) => { // ... }); oder: btn.addEventListener("click", function (event) { event.stopPropagation(); console.log("btn geklickt"); }); | |
| 3 | onError | Führt Javascript-Code aus, wenn ein Ladevorgang, etwa eines Bildes, einen Fehler verursacht. | ||
| 4 | onKeyPress | Führt Javascript-Code aus, wenn der Benutzer eine Taste drückt oder gedrückt hält. | (Veraltet/Deprecated) | |
| 5 | onLoad | Führt Javascript-Code aus, der Browser ein Dokument geladen hat. | window.addEventListener("DOMContentLoaded", function() { // ... } ); | |
| 6 | onMouseOut | Führt Javascript-Code aus, wenn der Mauszeiger einen aktiven Bereich verlässt. | ||
| 7 | onMove | Führt Javascript-Code aus, wenn der Benutzer ein Fenster oder einen Frame bewegt. | ||
| 8 | onSubmit: | Führt Javascript-Code aus, wenn der Benutzer ein Formular abschickt. | ||
| 9 | onInput | Führt Javascript-Code aus, wenn der Benutzer z.B.: einen Regler (<input type="range">) betätigt. | (HTML 5) | |
| 10 | onBlur | Führt Javascript-Code aus, wenn ein Element einer Webseite den Fokus verliert, zum Beispiel ein Formular, ein Fenster oder Frame. | ||
| 11 | onDblClick | Führt Javascript-Code aus, wenn der Benutzer ein Formular-Element doppelt anklickt. | ||
| 12 | onFocus | Führt Javascript-Code aus, wenn ein Element den Fokus erhält. | ||
| 13 | onKeyUp | Führt Javascript-Code aus, wenn der Benutzer eine gedrückte Taste wieder loslässt. | ||
| 14 | onMouseDown | Führt Javascript-Code aus, wenn der Benutzer eine Maustaste drückt. | ||
| 15 | onMouseOver | Führt Javascript-Code aus, wenn der Benutzer den Mauszeiger über ein entsprechendes Element bewegt. | document.getElementById("button").addEventListener("mouseover", test); | |
| 16 | onReset | Führt Javascript-Code aus, wenn der Benutzer ein Formular zurücksetzt. | ||
| 17 | onUnload | Führt Javascript-Code aus, wenn der Benutzer ein Dokument verlässt. | ||
| 18 | oninvalid | Führt Javascript-Code aus, wenn das Formularfeld nicht den Vorgaben entspricht. | (required, minlength, maxlength, pattern, etc.) | |
| 19 | onChange | Führt Javascript-Code aus, wenn ein Eingabefeld den Fokus verliert. | document.getElementById("button").addEventListener("change", test); | |
| 20 | onDragDrop | Führt Javascript-Code aus, wenn der Benutzer ein Objekt in das Fenster seines Browsers zieht und dort fallen lässt. | ||
| 21 | onKeyDown | Führt Javascript-Code aus, wenn der Benutzer eine Taste drückt. | ||
| 22 | onResize | Führt Javascript-Code aus, wenn der Benutzer die Größe eines Fensters oder Frames verändert. | ||
| 23 | onMouseMove | Führt Javascript-Code aus, wenn der Benutzer den Mauszeiger auf der Webseite bewegt. | ||
| 24 | onMouseUp | Führt Javascript-Code aus, wenn der Benutzer die gedrückte Maustaste wieder loslässt. | ||
| 25 | onSelect | Führt Javascript-Code aus, wenn der Benutzer einen Bereich markiert. | ||
| 26 | onMouseWheel | Führt Javascript-Code aus, wenn der Benutzer die Radtaste seiner Maus dreht. | (nur I. Explorer) | |
|
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: on). |