Globale Ereignis-Attribute
Globale Ereignis-Attribute ermöglichen es, mit JavaScript auf Browser-Ereignisse zu reagieren, z. B. bei Klicks oder Formulareingaben.
Ein Ereignis tritt auf, wenn der Browser auf eine bestimmte Aktion reagiert — ein Benutzer klickt eine Maustaste, drückt eine Taste, spielt ein Video ab, sendet ein Formular, ändert die Fenstergröße und so weiter. Um auf ein Ereignis zu reagieren, fügt man einen Handler hinzu: ein Skript-Fragment (in der Regel JavaScript), das ausgeführt wird, wenn das Ereignis ausgelöst wird.
HTML ermöglicht es, einen Handler direkt im Markup über ein Ereignis-Attribut anzuhängen. Jedes Attribut auf dieser Seite beginnt mit on, gefolgt vom Ereignisnamen (onclick, onkeydown, onsubmit, …). Alle wurden in HTML5 hinzugefügt und akzeptieren JavaScript-Code als Wert:
<button onclick="alert('Clicked!')">Click me</button>Diese Ereignis-Attribute sind global — die meisten können auf jedem Element verwendet werden — aber jedes ist nur im richtigen Kontext sinnvoll (Formular-Attribute bei Formularelementen, Media-Attribute bei <audio>/<video> usw.).
Inline-on*-Attribute werden in modernem Code nicht empfohlen. Sie vermischen Verhalten mit dem Markup, erlauben nicht ohne Weiteres mehrere Handler und werden durch eine strikte Content Security Policy blockiert. Bevorzuge addEventListener in einem separaten Skript, das HTML und JavaScript trennt und es mehreren Handlern erlaubt, dasselbe Ereignis zu beobachten:
<button id="myBtn">Click me</button>
<script>
const btn = document.getElementById("myBtn");
btn.addEventListener("click", () => {
alert("Clicked!");
});
</script>Die folgenden Tabellen listen die Ereignis-Attribute nach Kategorie auf. Eine ausführlichere Erläuterung der Funktionsweise von Ereignissen im Browser findest du unter JavaScript Events und den verwandten globalen HTML-Attributen.
Fenster-Ereignis-Attribute
Fenster-Ereignisse werden für das window-Objekt ausgelöst. Sie werden in der Regel am <body>-Tag platziert, wo der Browser sie auf window abbildet.
| Attribut | Beschreibung |
|---|---|
| onafterprint | Wird ausgelöst, nachdem das Dokument gedruckt wurde. |
| onbeforeprint | Wird ausgelöst, bevor das Dokument gedruckt wird. |
| onbeforeunload | Wird ausgelöst, bevor das Dokument entladen wird (z. B. wenn der Benutzer die Seite verlassen möchte). |
| onblur | Wird ausgelöst, wenn das Fenster den Fokus verliert (der Benutzer wechselt zu einem anderen Tab oder einer anderen App). |
| onerror | Wird ausgelöst, wenn beim Laden des Dokuments oder einer Ressource ein Fehler auftritt. |
| onhashchange | Wird ausgelöst, wenn sich das Fragment (der Teil der URL nach #) ändert. |
| onload | Wird ausgelöst, wenn die gesamte Seite — Bilder, CSS und Skripte — vollständig geladen wurde. |
| onmessage | Wird ausgelöst, wenn das Fenster eine Nachricht empfängt (z. B. von postMessage). |
| onoffline | Wird ausgelöst, wenn der Browser seine Netzwerkverbindung verliert. |
| ononline | Wird ausgelöst, wenn der Browser seine Netzwerkverbindung wiederherstellt. |
| onpagehide | Wird ausgelöst, wenn der Benutzer von der Seite wegnavigiert. |
| onpageshow | Wird ausgelöst, wenn der Benutzer zur Seite navigiert. |
| onpopstate | Wird ausgelöst, wenn sich der aktive Verlaufseintrag ändert. |
| onresize | Wird ausgelöst, wenn das Fenster in seiner Größe verändert wird. |
| onstorage | Wird ausgelöst, wenn ein Web-Storage-Bereich (localStorage/sessionStorage) aktualisiert wird. |
| onunload | Wird ausgelöst, wenn die Seite entladen wird (das Dokument wird entfernt). |
<body onload="document.body.style.background = '#eef'">
<p>This page changes its background colour once it has loaded.</p>
</body>Formular-Ereignis-Attribute
Ein Ereignis, das innerhalb eines Formulars auftreten kann, wird als Formular-Ereignis bezeichnet. Formular-Ereignisse treten auf, wenn ein Benutzer ein Formular öffnet oder schließt, zwischen Formularen wechselt oder mit Daten in einem Formular arbeitet.
Formular-Ereignis-Attribute können auf alle HTML-Elemente angewendet werden, werden jedoch in der Regel bei Formularelementen wie <input>, <select> und <textarea> eingesetzt.
| Attribut | Beschreibung |
|---|---|
| onblur | Wird ausgelöst, wenn ein Element den Fokus verliert (der Benutzer verlässt das Steuerelement per Tab oder Klick). |
| onchange | Wird ausgelöst, wenn sich der Wert eines Steuerelements geändert hat und das Steuerelement den Fokus verliert. |
| oncontextmenu | Wird ausgelöst, wenn das Kontextmenü (Rechtsklick) am Element geöffnet wird. |
| onfocus | Wird ausgelöst, wenn ein Element den Fokus erhält. |
| oninput | Wird sofort ausgelöst, jedes Mal wenn sich der Wert eines Steuerelements ändert. |
| oninvalid | Wird ausgelöst, wenn ein gesendetes Steuerelement die Constraint-Validierung nicht besteht. |
| onreset | Wird ausgelöst, wenn ein Formular auf seine Ausgangswerte zurückgesetzt wird. |
| onsearch | Wird ausgelöst, wenn der Benutzer in einem <input type="search">-Feld sucht. |
| onselect | Wird ausgelöst, wenn der Benutzer Text in einem <input> oder <textarea> markiert. |
| onsubmit | Wird ausgelöst, wenn ein Formular abgesendet wird. |
<form onsubmit="alert('Submitting…'); return false;">
<input type="text" name="name"
onfocus="this.style.background = '#ffd'"
onblur="this.style.background = ''"
placeholder="Your name">
<button type="submit">Send</button>
</form>Die Rückgabe von false aus onsubmit (oder das Aufrufen von event.preventDefault() in JavaScript) verhindert, dass das Formular tatsächlich gesendet wird — praktisch beim Testen.
Tastatur-Ereignis-Attribute
Die Tastatur-Ereignis-Attribute können auf alle HTML-Elemente angewendet werden.
| Attribut | Beschreibung |
|---|---|
| onkeydown | Wird ausgelöst, wenn eine Taste gedrückt wird. Wiederholt sich, solange die Taste gehalten wird. |
| onkeypress | Wird ausgelöst, wenn eine Zeichentaste gedrückt wird. Veraltet — verwende stattdessen onkeydown. |
| onkeyup | Wird ausgelöst, wenn eine gedrückte Taste losgelassen wird. |
<input type="text"
onkeyup="document.getElementById('echo').textContent = this.value"
placeholder="Type here">
<p>You typed: <span id="echo"></span></p>Maus-Ereignis-Attribute
Maus-Ereignisse treten auf, wenn die Maus mit dem HTML-Dokument interagiert. Die Attribute können auf alle HTML-Elemente angewendet werden.
| Attribut | Beschreibung |
|---|---|
| onclick | Wird ausgelöst, wenn auf das Element geklickt wird. |
| ondblclick | Wird ausgelöst, wenn das Element doppelt angeklickt wird. |
| ondrag | Wird wiederholt ausgelöst, während ein Element gezogen wird. |
| ondragend | Wird ausgelöst, wenn ein Ziehvorgang endet. |
| ondragenter | Wird ausgelöst, wenn ein gezogenes Element ein gültiges Ablageziel betritt. |
| ondragleave | Wird ausgelöst, wenn ein gezogenes Element ein gültiges Ablageziel verlässt. |
| ondragover | Wird wiederholt ausgelöst, während sich ein gezogenes Element über einem gültigen Ablageziel befindet. |
| ondragstart | Wird ausgelöst, wenn der Benutzer beginnt, ein Element zu ziehen. |
| ondrop | Wird ausgelöst, wenn ein gezogenes Element auf einem gültigen Ablageziel abgelegt wird. |
| onmousedown | Wird ausgelöst, wenn eine Maustaste über dem Element gedrückt wird. |
| onmousemove | Wird ausgelöst, wenn der Mauszeiger sich über dem Element bewegt. |
| onmouseout | Wird ausgelöst, wenn der Mauszeiger das Element verlässt. |
| onmouseover | Wird ausgelöst, wenn der Mauszeiger das Element betritt. |
| onmouseup | Wird ausgelöst, wenn eine Maustaste über dem Element losgelassen wird. |
| onmousewheel | Veraltet — verwende stattdessen onwheel. |
| onscroll | Wird ausgelöst, wenn die Scrollleiste eines Elements gescrollt wird. |
| onwheel | Wird ausgelöst, wenn das Mausrad über dem Element nach oben oder unten gedreht wird. |
<div onmousemove="this.textContent = event.offsetX + ', ' + event.offsetY"
style="width:240px; height:120px; background:#eef; text-align:center; line-height:120px;">
Move the mouse here
</div>Zwischenablage-Ereignis-Attribute
| Attribut | Beschreibung |
|---|---|
| oncopy | Wird ausgelöst, wenn der Inhalt eines Elements kopiert wird. |
| oncut | Wird ausgelöst, wenn der Inhalt eines Elements ausgeschnitten wird. |
| onpaste | Wird ausgelöst, wenn Inhalt in ein Element eingefügt wird. |
Media-Ereignis-Attribute
Media-Ereignisse treten in Medienelementen wie Video, Bild und Audio auf. Die Attribute können auf alle HTML-Elemente angewendet werden, werden jedoch in der Regel in audio-, embed-, img-, object- und video-Elementen verwendet.
| Attribut | Beschreibung |
|---|---|
| onabort | Wird ausgelöst, wenn das Laden des Mediums abgebrochen wird. |
| oncanplay | Wird ausgelöst, wenn der Browser genug gepuffert hat, um die Wiedergabe zu starten. |
| oncanplaythrough | Wird ausgelöst, wenn der Browser schätzt, dass er ohne Pufferunterbrechung durchspielen kann. |
| oncuechange | Wird ausgelöst, wenn sich der aktive Cue einer Textspur (z. B. Untertitel) ändert. |
| ondurationchange | Wird ausgelöst, wenn sich die Dauer des Mediums ändert. |
| onemptied | Wird ausgelöst, wenn das Medium leer wird (z. B. wenn die Verbindung unterbrochen wird). |
| onended | Wird ausgelöst, wenn die Wiedergabe das Ende des Mediums erreicht. |
| onerror | Wird ausgelöst, wenn beim Laden des Mediums ein Fehler auftritt. |
| onloadeddata | Wird ausgelöst, wenn das aktuelle Frame der Mediendaten geladen wurde. |
| onloadedmetadata | Wird ausgelöst, wenn Metadaten (Dauer, Abmessungen, …) geladen wurden. |
| onloadstart | Wird ausgelöst, wenn der Browser beginnt, das Medium zu laden. |
| onpause | Wird ausgelöst, wenn die Wiedergabe pausiert wird. |
| onplay | Wird ausgelöst, wenn die Wiedergabe startet oder fortgesetzt wird. |
| onplaying | Wird ausgelöst, wenn die Wiedergabe tatsächlich läuft (z. B. nach dem Puffern). |
| onprogress | Wird periodisch ausgelöst, während der Browser das Medium lädt. |
| onratechange | Wird ausgelöst, wenn sich die Wiedergabegeschwindigkeit ändert (z. B. Schnellvorlauf). |
| onseeked | Wird ausgelöst, wenn ein Suchvorgang endet. |
| onseeking | Wird ausgelöst, wenn ein Suchvorgang beginnt. |
| onstalled | Wird ausgelöst, wenn der Browser versucht, aber keine Mediendaten abrufen kann. |
| onsuspend | Wird ausgelöst, wenn das Laden des Mediums absichtlich pausiert wird. |
| ontimeupdate | Wird ausgelöst, wenn sich die Wiedergabeposition während der Wiedergabe ändert. |
| onvolumechange | Wird ausgelöst, wenn sich die Lautstärke ändert (einschließlich Stummschaltung). |
| onwaiting | Wird ausgelöst, wenn die Wiedergabe stoppt, weil das nächste Frame noch nicht gepuffert ist. |
Sonstige Ereignisse
| Attribut | Beschreibung |
|---|---|
| ontoggle | Wird ausgelöst, wenn der Benutzer ein <details>-Element öffnet oder schließt. |
Einige Attribute, die in älteren Referenzen zu finden sind — onredo, onundo und onshow — waren nie Bestandteil des Standard-HTML oder werden von Browsern nicht unterstützt und wurden daher hier weggelassen.