Maus-Events

Maus-Events reagieren auf Aktionen mit der Maus – zum Beispiel Klicks, Doppelklicks oder das Bewegen des Mauszeigers über ein Element. Sie gehören zu den am häufigsten genutzten Events in JavaScript.

Das click-Event

Das click-Event ist das bekannteste Maus-Event. Es wird ausgelöst, wenn der Nutzer auf ein Element klickt – also die Maustaste drückt und wieder loslässt.

Typischer Einsatz: Buttons, Menüpunkte, Karten oder Icons anklickbar machen.

HTML – Button

1<button id="likeButton">Like</button>

JavaScript – click-Event

1const button = document.getElementById("likeButton");
2
3button.addEventListener("click", function() {
4    console.log("Button wurde geklickt!");
5    button.textContent = "Geliked ❤️";
6});

Weitere Maus-Events

Neben click gibt es weitere Maus-Events. Du registrierst sie genauso mit addEventListener() – du tauschst nur den Event-Namen aus.

Event	Wann wird es ausgelöst?	Typischer Einsatz
`dblclick`	Bei einem Doppelklick auf ein Element	Elemente bearbeiten, Dateien öffnen, Text markieren
`mousedown`	Sobald eine Maustaste gedrückt wird	Drag-Start, gedrückt halten, Zeichnen
`mouseup`	Wenn eine Maustaste wieder losgelassen wird	Drag beenden, Aktion nach dem Loslassen
`mouseenter`	Wenn der Mauszeiger in ein Element hineinbewegt wird	Hover-Effekte, Tooltips anzeigen
`mouseleave`	Wenn der Mauszeiger ein Element wieder verlässt	Hover-Effekt ausblenden, Tooltip verstecken
`mouseover`	Ähnlich wie mouseenter, bubbelt aber zu Elternelementen	Reagieren, wenn die Maus über Kind-Elemente fährt
`mouseout`	Ähnlich wie mouseleave, bubbelt aber zu Elternelementen	Gegenteil zu mouseover, oft bei verschachtelten Elementen
`mousemove`	Während sich die Maus über einem Element bewegt	Zeichnen, Mausposition verfolgen, Slider bewegen
`contextmenu`	Bei einem Rechtsklick auf ein Element	Eigenes Kontextmenü statt Browser-Menü anzeigen

Merksatz: Für die meisten Klick-Aktionen reicht click. Für Hover-Effekte nutzt du oft mouseenter und mouseleave.

Aufgaben

Baue kleine Maus-Interaktionen und teste sie im Browser:

Erstelle einen Button. Beim clicksoll sich der Button-Text ändern (z. B. von „Like“ zu „Geliked“).
Nutze mouseenter und mouseleave, um die Hintergrundfarbe einer Box zu wechseln, wenn die Maus darüber fährt.
Verhindere mit contextmenu und preventDefault() das Browser-Kontextmenü auf einem Element und zeige stattdessen eine eigene Meldung in der Konsole.
Zähle mit dblclick, wie oft ein Element doppelgeklickt wurde, und zeige die Zahl in einem <p>-Element an.

Im nächsten Kapitel lernst du: Tastatur-Events