Eventhandler
IDEventhandlerBeschreibungVermerkBeispiel
1onAbortFührt Javascript-Code aus, wenn der Benutzer eine Aktion abbricht.
2onClickFü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");
});
3onErrorFührt Javascript-Code aus, wenn ein Ladevorgang, etwa eines Bildes, einen Fehler verursacht.
4onKeyPressFührt Javascript-Code aus, wenn der Benutzer eine Taste drückt oder gedrückt hält.(Veraltet/Deprecated)
5onLoadFührt Javascript-Code aus, der Browser ein Dokument geladen hat.window.addEventListener("DOMContentLoaded", function()
{
// ...
}
);
6onMouseOutFührt Javascript-Code aus, wenn der Mauszeiger einen aktiven Bereich verlässt.
7onMoveFührt Javascript-Code aus, wenn der Benutzer ein Fenster oder einen Frame bewegt.
8onSubmit: Führt Javascript-Code aus, wenn der Benutzer ein Formular abschickt.
9onInputFührt Javascript-Code aus, wenn der Benutzer z.B.: einen Regler (<input type="range">) betätigt.(HTML 5)
10onBlurFührt Javascript-Code aus, wenn ein Element einer Webseite den Fokus verliert, zum Beispiel ein Formular, ein Fenster oder Frame.
11onDblClickFührt Javascript-Code aus, wenn der Benutzer ein Formular-Element doppelt anklickt.
12onFocusFührt Javascript-Code aus, wenn ein Element den Fokus erhält.
13onKeyUpFührt Javascript-Code aus, wenn der Benutzer eine gedrückte Taste wieder loslässt.
14onMouseDownFührt Javascript-Code aus, wenn der Benutzer eine Maustaste drückt.
15onMouseOverFührt Javascript-Code aus, wenn der Benutzer den Mauszeiger über ein entsprechendes Element bewegt.document.getElementById("button").addEventListener("mouseover", test);
16onResetFührt Javascript-Code aus, wenn der Benutzer ein Formular zurücksetzt.
17onUnloadFührt Javascript-Code aus, wenn der Benutzer ein Dokument verlässt.
18oninvalidFührt Javascript-Code aus, wenn das Formularfeld nicht den Vorgaben entspricht.(required, minlength, maxlength, pattern, etc.)
19onChangeFührt Javascript-Code aus, wenn ein Eingabefeld den Fokus verliert.document.getElementById("button").addEventListener("change", test);
20onDragDropFührt Javascript-Code aus, wenn der Benutzer ein Objekt in das Fenster seines Browsers zieht und dort fallen lässt.
21onKeyDownFührt Javascript-Code aus, wenn der Benutzer eine Taste drückt.
22onResizeFührt Javascript-Code aus, wenn der Benutzer die Größe eines Fensters oder Frames verändert.
23onMouseMoveFührt Javascript-Code aus, wenn der Benutzer den Mauszeiger auf der Webseite bewegt.
24onMouseUpFührt Javascript-Code aus, wenn der Benutzer die gedrückte Maustaste wieder loslässt.
25onSelectFührt Javascript-Code aus, wenn der Benutzer einen Bereich markiert.
26onMouseWheelFü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: onclick sondern mit: click gesetzt (also ohne das on).