Liste der wichtigen Events

Maus-Events

• click – Einzelklick auf ein Element.
• dblclick – Doppelklick auf ein Element.
• mousedown – Maustaste wird gedrückt.
• mouseup – Maustaste wird losgelassen.
• mouseenter – Maus bewegt sich in ein Element hinein (kein Bubbling).
• mouseleave – Maus verlässt ein Element (kein Bubbling).
• mouseover – Maus bewegt sich über ein Element (mit Bubbling).
• mouseout – Maus verlässt ein Element oder Kindelement (mit Bubbling).
• mousemove – Maus wird innerhalb eines Elements bewegt.
• contextmenu – Rechtsklick (Kontextmenü wird geöffnet).
• wheel – Mausrad wird gedreht.

Beispiel:

element.addEventListener("mouseenter", () => console.log("Maus im Element"));

element.addEventListener("mouseenter", () => console.log("Maus im Element"));

Tastatur-Events

• keydown – Taste wird gedrückt.
• keyup – Taste wird losgelassen.
• keypress – (Veraltet) Wird bei gedrückter Taste ausgelöst (ignoriert Sondertasten wie Shift).

Beispiel:

document.addEventListener("keydown",
(e) => console.log(`Gedrückte Taste: ${e.key}`));

document.addEventListener("keydown",
(e) => console.log(`Gedrückte Taste: ${e.key}`));

Formular-Events

• submit – Formular wird abgeschickt.
• reset – Formular wird zurückgesetzt.
• change – Wert eines Inputs/Selects/Checkbox ändert sich (nach Verlassen des Felds).
• input – Wert eines Inputs ändert sich (sofort bei jeder Eingabe).
• focus – Element erhält Fokus (z. B. Input angeklickt).
• blur – Element verliert Fokus (z. B. Input verlassen).
• invalid – Formularvalidierung fehlgeschlagen.

Beispiel:

form.addEventListener("submit", (e) => e.preventDefault());

form.addEventListener("submit", (e) => e.preventDefault());

Drag & Drop-Events

• dragstart – Element wird gezogen.
• dragend – Ziehen wird beendet.
• dragenter – Gezogenes Element betritt ein Ziel.
• dragleave – Gezogenes Element verlässt ein Ziel.
• dragover – Gezogenes Element schwebt über einem Ziel (muss für drop unterbunden werden).
• drop – Element wird auf einem Ziel abgelegt.

Beispiel:

element.addEventListener("drop", (e) => {
  e.preventDefault();
  console.log("Element abgelegt");
});

element.addEventListener("drop", (e) => {
  e.preventDefault();
  console.log("Element abgelegt");
});

Fenster- & Dokument-Events

• load – Seite/Resource (z. B. Bild) ist fertig geladen.
• DOMContentLoaded – HTML ist vollständig geparst (ohne Warten auf CSS/Images).
• beforeunload – Fenster wird geschlossen/neu geladen.
• unload – Fenster/Seite wird entladen.
• resize – Fenstergröße ändert sich.
• scroll – Fenster/Element wird gescrollt.
• hashchange – URL-Hash (z. B. #abschnitt) ändert sich.

Beispiel:

window.addEventListener("resize", () => console.log("Fenster angepasst"));

window.addEventListener("resize", () => console.log("Fenster angepasst"));

Medien-Events (Video/Audio)

• play – Wiedergabe startet.
• pause – Wiedergabe wird pausiert.
• ended – Medienende erreicht.
• volumechange – Lautstärke ändert sich.
• timeupdate – Abspielposition ändert sich.

Beispiel:

video.addEventListener("play", () => console.log("Video gestartet"));

video.addEventListener("play", () => console.log("Video gestartet"));

Clipboard-Events

• copy – Text wird kopiert.
• cut – Text wird ausgeschnitten.
• paste – Text wird eingefügt.

Beispiel:

document.addEventListener("copy", (e) => {
  e.clipboardData.setData("text/plain", "Kopierter Text ersetzt!");
  e.preventDefault();
});

document.addEventListener("copy", (e) => {
  e.clipboardData.setData("text/plain", "Kopierter Text ersetzt!");
  e.preventDefault();
});

Touch-Events (für Mobile)

• touchstart – Finger berührt den Bildschirm.
• touchend – Finger wird gehoben.
• touchmove – Finger bewegt sich auf dem Bildschirm.
• touchcancel – Touch wird unterbrochen (z. B. durch eingehenden Anruf).

Beispiel:

element.addEventListener("touchstart", (e) => console.log("Touch gestartet"));

element.addEventListener("touchstart", (e) => console.log("Touch gestartet"));

Websocket-/Server-Events

• open – Verbindung hergestellt.
• message – Daten empfangen.
• error – Fehler aufgetreten.
• close – Verbindung geschlossen.

Beispiel:

socket.addEventListener("message", (e) => console.log(`Daten: ${e.data}`));

socket.addEventListener("message", (e) => console.log(`Daten: ${e.data}`));

Custom Events

Eigene Events mit CustomEvent

const event = new CustomEvent("meinEvent", { detail: { data: 123 } });
element.dispatchEvent(event);

const event = new CustomEvent("meinEvent", { detail: { data: 123 } });
element.dispatchEvent(event);