Globale Ereignisattribute
Ein Ereignis tritt auf, wenn der Browser auf eine bestimmte Aktion des Benutzers reagiert. Der Benutzer erzeugt ein Ereignis, wenn er auf eine Maustaste klickt, ein Video abspielt, ein Dokument oder ein Bild hochlädt oder andere Aktionen auf einer Website ausführt.
Um auf ein Ereignis zu reagieren, wird ihm ein Handler zugewiesen. Ein Handler ist eine Möglichkeit, Skript auszuführen (z. B. JavaScript), wenn Benutzeraktionen auftreten. Es gibt viele Möglichkeiten, einen Handler anzubinden, und eine davon ist, ihn in HTML mit Attributen festzulegen.
Unten finden Sie eine Tabelle mit Ereignisattributen, die zum Auslösen bestimmter Aktionen verwendet werden.
html
<button onclick="alert('Clicked!')">Click me</button>Fenster-Ereignisattribute
Fensterereignisse werden für das Window-Objekt ausgelöst. Dies sind globale Attribute, die bei jedem Element verwendet werden können, obwohl sie am häufigsten auf das <body>-Tag angewendet werden.
| Attribut | Beschreibung |
|---|---|
| onafterprint | Wird ausgeführt, wenn das Dokument gedruckt wird. Neues Attribut in HTML5. |
| onbeforeprint | Wird ausgeführt, bevor das Dokument gedruckt wird. Neues Attribut in HTML5. |
| onbeforeunload | Wird ausgeführt, wenn das Dokument kurz davor ist, entladen zu werden (wenn ein Benutzer die Seite verlassen will, bevor sie geladen ist). Neues Attribut in HTML5. |
| onblur | Wird ausgeführt, wenn ein Fenster den Fokus verliert. |
| onerror | Wird ausgeführt, wenn beim Herunterladen des Dokuments ein Fehler auftritt. Neues Attribut in HTML5. |
| onhashchange | Wird ausgeführt, wenn der Anker in der URL einer Webseite geändert wird (der Anker steht hinter #). Neues Attribut in HTML5. |
| onload | Wird ausgeführt, wenn der Inhalt einer Webseite (Bilder, CSS-Styles und Skripte) vollständig geladen ist. |
| onmessage | Wird ausgeführt, wenn eine Nachricht ausgelöst wird. Neues Attribut in HTML5. |
| onoffline | Wird ausgeführt, wenn der Browser offline arbeitet. Neues Attribut in HTML5. |
| ononline | Wird ausgeführt, wenn der Browser online arbeitet. Neues Attribut in HTML5. |
| onpagehide | Wird ausgeführt, wenn ein Benutzer die Webseite verlässt. Neues Attribut in HTML5. |
| onpageshow | Wird ausgeführt, wenn ein Benutzer zu einer Webseite navigiert. Neues Attribut in HTML5. |
| onpopstate | Wird ausgeführt, wenn der Verlauf des Fensters geändert wird. Neues Attribut in HTML5. |
| onredo | Wird ausgeführt, wenn die Option „Wiederholen“ verwendet wird (die letzte Aktion wird rückgängig gemacht). Neues Attribut in HTML5. |
| onresize | Wird ausgeführt, wenn die Größe eines Fensters geändert wird. Neues Attribut in HTML5. |
| onstorage | Wird ausgeführt, wenn ein Webspeicher aktualisiert wird. Neues Attribut in HTML5. |
| onundo | Wird ausgeführt, wenn die letzte Aktion abgebrochen wird (Befehl „Rückgängig“). Neues Attribut in HTML5. |
| onunload | Wird ausgeführt, wenn eine Webseite entladen wird (geschlossen wird). Neues Attribut in HTML5. |
Formular-Ereignisattribute
Ein Ereignis, das innerhalb eines Formulars auftreten kann, wird als Formularereignis bezeichnet. Formularereignisse treten auf, wenn ein Benutzer ein Formular öffnet oder schließt, zwischen Formularen wechselt oder mit Daten in einem Formular arbeitet.
Formularereignisattribute können auf alle HTML-Elemente angewendet werden, werden jedoch im Allgemeinen mit HTML-Formularelementen verwendet.
| Attribut | Beschreibung |
|---|---|
| onblur | Wird ausgeführt, wenn ein Formularelement den Fokus verliert. |
| onchange | Wird ausgeführt, wenn der Wert des Elements geändert wird. |
| oncontextmenu | Wird ausgeführt, wenn das Kontextmenü angezeigt wird. Neues Attribut in HTML5. |
| onfocus | Wird ausgeführt, wenn ein Element den Fokus erhält. |
| oninput | Wird ausgeführt, wenn ein Element Benutzereingaben erhält. Neues Attribut in HTML5. |
| oninvalid | Wird ausgeführt, wenn ein Eingabeelement ungültig ist. Neues Attribut in HTML5. |
| onreset | Wird ausgeführt, wenn ein Formular zurückgesetzt wird (alle Steuerelemente innerhalb des Formulars werden auf ihre Anfangswerte gesetzt). Neues Attribut in HTML5. |
| onsearch | Wird ausgeführt, wenn der Benutzer etwas in ein Suchfeld eingibt (für <input type="search">). |
| onselect | Wird ausgeführt, wenn in einem Element Text ausgewählt wird. |
| onsubmit | Wird ausgeführt, wenn ein Formular gesendet wird. |
Tastatur-Ereignisattribute
Die Tastaturereignisattribute können auf alle HTML-Elemente angewendet werden.
| Attribut | Beschreibung |
|---|---|
| onkeydown | Wird ausgeführt, wenn der Benutzer eine beliebige Taste auf der Tastatur drückt. |
| onkeypress | Wird ausgeführt, wenn eine Taste gedrückt wird. (Veraltet/Obsolet. Funktioniert nicht mit Alt, Strg, Umschalt, Esc, Druck usw.) |
| onkeyup | Wird ausgeführt, wenn eine gedrückte Taste losgelassen wird. |
Maus-Ereignisattribute
Mausereignisse treten auf, wenn die Maus mit dem HTML-Dokument interagiert. Die Attribute können auf alle HTML-Elemente angewendet werden.
| Attribut | Beschreibung |
|---|---|
| onclick | Wird ausgeführt, wenn auf eine Maustaste geklickt wird. |
| ondblclick | Wird ausgeführt, wenn zweimal auf eine Maustaste geklickt wird. |
| ondrag | Wird ausgeführt, wenn ein Element gezogen wird. Neues Attribut in HTML5. |
| ondragend | Wird ausgeführt, wenn ein Element gezogen wurde. Neues Attribut in HTML5. |
| ondragenter | Wird ausgeführt, wenn ein gezogenes Element ein gültiges Ablageziel betritt. Neues Attribut in HTML5. |
| ondragleave | Wird ausgeführt, wenn ein gezogenes Element ein gültiges Ablageziel verlässt. Neues Attribut in HTML5. |
| ondragover | Wird ausgeführt, wenn ein gezogenes Element über ein gültiges Ablageziel gezogen wird (alle paar hundert Millisekunden). Neues Attribut in HTML5. |
| ondragstart | Wird ausgeführt, wenn der Benutzer beginnt, ein Element zu ziehen. Neues Attribut in HTML5. |
| ondrop | Wird ausgeführt, wenn der Benutzer ein gezogenes Element ablegt. Neues Attribut in HTML5. |
| onmousedown | Wird ausgeführt, wenn eine Maustaste gedrückt wird. |
| onmousemove | Wird ausgeführt, wenn der Mauszeiger auf das Element bewegt wird. |
| onmouseout | Wird ausgeführt, wenn der Mauszeiger ein Element verlässt. |
| onmouseover | Wird ausgeführt, wenn der Mauszeiger auf ein Element bewegt wird. |
| onmouseup | Wird ausgeführt, wenn eine Maustaste losgelassen wird. |
| onmousewheel | Wird ausgeführt, wenn das Mausrad über einem Element nach oben oder unten gedreht wird. Veraltetes Attribut (verwenden Sie stattdessen das Attribut onwheel). |
| onscroll | Wird ausgeführt, wenn die Bildlaufleiste eines Elements gescrollt wird. Neues Attribut in HTML5. |
| onwheel | Wird ausgeführt, wenn das Mausrad über einem Element nach oben oder unten gedreht wird. Neues Attribut in HTML5. |
Zwischenablage-Ereignisattribute
| Attribut | Beschreibung |
|---|---|
| oncopy | Wird ausgeführt, wenn der Inhalt eines Elements kopiert wird. |
| oncut | Wird ausgeführt, wenn der Inhalt eines Elements ausgeschnitten wird. |
| onpaste | Wird ausgeführt, wenn der Inhalt eines Elements eingefügt wird. |
Medienereignisattribute
Medienereignisse treten in Medienelementen wie Video, Bild und Audio auf. Die Attribute können auf jedes HTML-Element angewendet werden, werden jedoch im Allgemeinen innerhalb der Elemente audio, embed, img, object und video verwendet.
| Attribut | Beschreibung |
|---|---|
| onabort | Wird ausgeführt, wenn das Laden eines Audio-/Videodatei abgebrochen wird. Neues Attribut in HTML5. |
| oncanplay | Wird ausgeführt, wenn die Datei bereit ist, mit der Wiedergabe zu beginnen (es wurde genug gepuffert, um zu starten). Neues Attribut in HTML5. |
| oncanplaythrough | Wird ausgeführt, wenn die Datei von Anfang bis Ende ohne Unterbrechung zum Puffern abgespielt werden kann. Neues Attribut in HTML5. |
| oncuechange | Wird ausgeführt, wenn die Dauer der Medien geändert wird. Neues Attribut in HTML5. |
| onemptied | Wird ausgeführt, wenn etwas passiert und die Datei nicht verfügbar ist (z. B. wenn die Internetverbindung verloren geht). Neues Attribut in HTML5. |
| onended | Wird ausgeführt, wenn eine Mediendatei das Ende erreicht hat. Neues Attribut in HTML5. |
| onerror | Wird ausgeführt, wenn beim Laden der Datei ein Fehler auftritt. Neues Attribut in HTML5. |
| onloadeddata | Wird ausgeführt, wenn Mediendaten geladen sind. Neues Attribut in HTML5. |
| onloadedmetadata | Wird ausgeführt, wenn Metadaten (Größe von Mediendateien, Dauer usw.) geladen sind. Neues Attribut in HTML5. |
| onloadstart | Wird ausgeführt, wenn der Browser mit dem Herunterladen von Mediendaten beginnt. Neues Attribut in HTML5. |
| onpause | Wird ausgeführt, wenn die Mediendatei pausiert wird. Neues Attribut in HTML5. |
| onplay | Wird ausgeführt, wenn die Datei bereit ist, mit der Wiedergabe zu beginnen. Neues Attribut in HTML5. |
| onplaying | Wird ausgeführt, wenn die Datei mit der Wiedergabe beginnt. Neues Attribut in HTML5. |
| onprogress | Wird ausgeführt, wenn der Browser gerade Mediendaten abruft. Neues Attribut in HTML5. |
| onratechange | Wird jedes Mal ausgeführt, wenn der Wiedergabemodus geändert wird (z. B. wenn der Benutzer in den Schnellvorlauf- oder Zeitlupenmodus wechselt). Neues Attribut in HTML5. |
| onseeked | Wird ausgeführt, wenn das Suchen beendet wurde. Neues Attribut in HTML5. |
| onseeking | Wird ausgeführt, wenn das Attribut seeking der Tags <audio> oder <video> auf true gesetzt ist und damit anzeigt, dass das Suchen aktiv ist. Neues Attribut in HTML5. |
| onstalled | Wird ausgeführt, wenn der Browser aus irgendeinem Grund keine Mediendaten abrufen kann. Neues Attribut in HTML5. |
| onsuspend | Wird ausgeführt, wenn der Browser bereits mit dem Extrahieren von Mediendaten begonnen hat, der Vorgang jedoch unterbrochen wurde, bevor die Daten vollständig geladen sind. Neues Attribut in HTML5. |
| ontimeupdate | Wird ausgeführt, wenn die Wiedergabeposition geändert wird. Neues Attribut in HTML5. |
| onvolumechange | Wird jedes Mal ausgeführt, wenn die Lautstärke geändert wird (einschließlich der Einstellung auf „Stumm“). Neues Attribut in HTML5. |
| onwaiting | Wird ausgeführt, wenn die Mediendatei angehalten ist, aber gleich fortgesetzt wird (z. B. wenn die Datei zum Puffern pausiert wurde). Neues Attribut in HTML5. |
Andere Ereignisse
| Attribut | Beschreibung |
|---|---|
| onerror | Wird ausgeführt, wenn beim Herunterladen einer externen Datei ein Fehler auftritt. |
| onshow | Wird ausgeführt, wenn das <menu> als Kontextmenü angezeigt wird. Neues Attribut in HTML5. |
| ontoggle | Wird ausgeführt, wenn ein Benutzer das <details> öffnet oder schließt. Neues Attribut in HTML5. |
Practice
What are global event attributes in HTML?