JavaScript Academy · Lektion

Tastatur- und Mausereignisse

Behandeln Sie Klicks, Tastendrücke und Pointer-Ereignisse.

Tastatur- und Mausereignisse ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Familien von Eingabeereignissen

Maus- und Tastaturereignisse ermöglichen Ihnen, umfangreiche Interaktionen zu erstellen. Jede Familie umfasst spezialisierte Ereignistypen und Eigenschaften.

Das click-Ereignis

click wird bei einem primären Drücken und Loslassen ausgelöst. Es wird auch bei der Aktivierung von Schaltflächen und Links über die Tastatur ausgelöst und macht diese dadurch barrierefrei.

btn.addEventListener("click", () => {
  console.log("activated");
});

dblclick und contextmenu

dblclick wird bei einem Doppelklick ausgelöst, während contextmenu bei einem Rechtsklick ausgelöst wird (häufig wird es abgebrochen, um ein benutzerdefiniertes Menü anzuzeigen).

el.addEventListener("dblclick", () => console.log("double"));
el.addEventListener("contextmenu", (e) => e.preventDefault());

mousedown, mouseup, mousemove

Diese Ereignisse ermöglichen eine präzise Steuerung: Drücken, Loslassen und Bewegen. Sie sind die Bausteine für Ziehinteraktionen.

box.addEventListener("mousedown", () => console.log("down"));
box.addEventListener("mouseup", () => console.log("up"));

mouseenter im Vergleich zu mouseover

mouseenter wird nicht nach oben weitergegeben und ignoriert Grenzen von Kindelementen, während mouseover weitergegeben wird und beim Bewegen auf Nachfahren ausgelöst wird. Für Hover-Effekte ist mouseenter normalerweise die richtige Wahl.

el.addEventListener("mouseenter", () => el.classList.add("hover"));
el.addEventListener("mouseleave", () => el.classList.remove("hover"));

Welche Maustaste

Die Eigenschaft button gibt an, welche Maustaste das Ereignis ausgelöst hat: 0 links, 1 Mitte, 2 rechts.

el.addEventListener("mousedown", (e) => {
  if (e.button === 2) console.log("right button");
});

keydown und keyup

keydown wird ausgelöst, wenn eine Taste gedrückt wird (und wiederholt sich, solange sie gedrückt gehalten wird); keyup wird beim Loslassen ausgelöst. keypress ist veraltet.

input.addEventListener("keydown", (e) => {
  console.log("down: " + e.key);
});

event.key

e.key ist der logische Wert der Taste: ein Zeichen wie "a" oder ein Name wie "Enter", "Escape" oder "ArrowUp".

input.addEventListener("keydown", (e) => {
  if (e.key === "Escape") console.log("cancel");
});

event.code

e.code bezeichnet die physische Position der Taste (z. B. "KeyA" oder "Space"), unabhängig vom Tastaturlayout. Verwenden Sie es für Spielsteuerungen.

window.addEventListener("keydown", (e) => {
  if (e.code === "Space") console.log("jump");
});

Tastaturkürzel

Kombinieren Sie Modifikator-Flags mit key, um Tastaturkürzel zu erkennen, und rufen Sie preventDefault auf, um das Standardverhalten des Browsers zu überschreiben.

document.addEventListener("keydown", (e) => {
  if (e.ctrlKey && e.key === "s") {
    e.preventDefault();
    console.log("save");
  }
});

repeat bei gedrückten Tasten

e.repeat ist true, wenn ein keydown-Ereignis ausgelöst wird, weil die Taste gedrückt gehalten wird. So können Sie automatische Wiederholungen ignorieren.

window.addEventListener("keydown", (e) => {
  if (e.repeat) return;
  console.log("first press of " + e.key);
});

Kurztest

Wählen Sie die vom Layout unabhängige Eigenschaft aus.

Zusammenfassung

Zu den Mausereignissen gehören click, dblclick, mousedown/mouseup/mousemove sowie die hover-freundlichen Ereignisse mouseenter/mouseleave; button gibt an, welche Maustaste verwendet wurde. Bei Tastaturereignissen kommen keydown/keyup zum Einsatz, wobei e.key das Zeichen bzw. den Namen, e.code die physische Taste und e.repeat gedrückt gehaltene Tasten bezeichnet.

Häufig gestellte Fragen

Ist die Lektion „Tastatur- und Mausereignisse“ kostenlos?

Ja — der vollständige Text von „Tastatur- und Mausereignisse“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des JavaScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Tastatur- und Mausereignisse“?

Behandeln Sie Klicks, Tastendrücke und Pointer-Ereignisse. Du übst JavaScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um JavaScript Academy zu starten?

Keine Vorkenntnisse erforderlich. JavaScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Tastatur- und Mausereignisse“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser JavaScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede JavaScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu JavaScript Academy