Element: mouseover — Ereignis · JavaScript-Referenz

Signatur

element.addEventListener("mouseover", handler)

Beschreibung

Das Ereignis mouseover wird ausgelöst, sobald ein Zeigegerät wie Maus oder Trackpad den Cursor auf ein Element bewegt. Anders als mouseenter steigt es im DOM auf. Es tritt also auch dann erneut auf, wenn der Cursor von einem Elternelement auf eines seiner Kindelemente wechselt. Der Handler bekommt ein MouseEvent-Objekt.

Du registrierst es entweder mit element.addEventListener("mouseover", handler) oder über die Eigenschaft element.onmouseover = handler. Mit addEventListener kannst du mehrere Handler anhängen und sie später gezielt mit removeEventListener wieder entfernen.

Weil das Ereignis aufsteigt, eignet sich mouseover gut für die Ereignisdelegation: Ein einzelner Listener an einem Container reicht aus, um Hover-Effekte für viele (auch später hinzugefügte) Kindelemente zu steuern. Über event.target erfährst du, welches Element der Zeiger gerade betreten hat. event.relatedTarget nennt das Element, von dem der Zeiger kam.

Reine Gestaltungsänderungen löst du besser mit der CSS-Pseudoklasse :hover. mouseover brauchst du, wenn eine Logik in JavaScript ablaufen soll, zum Beispiel ein Tooltip, Nachladen von Vorschaudaten oder Auswertungen.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignisname `"mouseover"`.
$handler Pflicht	(event: MouseEvent) => void		Callback, der ein `MouseEvent` bekommt. Wichtige Eigenschaften: `target`, `relatedTarget`, `clientX`/`clientY`, `buttons`, `altKey`/`ctrlKey`/`shiftKey`/`metaKey`.
$options	boolean \| AddEventListenerOptions	false	Optional: `{ once, passive, capture, signal }`. Mit `signal` eines `AbortController` entfernst du den Listener bequem wieder.

Rückgabewert

Typ

void

Beschreibung

addEventListener gibt nichts zurück. Das Ereignis selbst ist abbrechbar (cancelable) und steigt auf (bubbles: true).

Beispiele

Einfacher Hover-Handler mit addEventListener

const box = document.querySelector('#box');

box.addEventListener('mouseover', (event) => {
  console.log('Zeiger über:', event.target.id);
  box.classList.add('aktiv');
});

box.addEventListener('mouseout', () => {
  box.classList.remove('aktiv');
});

Zeiger über: box

Ereignisdelegation: Tooltip für Listeneinträge

const liste = document.querySelector('#produkte');
const tooltip = document.querySelector('#tooltip');

liste.addEventListener('mouseover', (event) => {
  const eintrag = event.target.closest('li[data-info]');
  // Nur reagieren, wenn der Zeiger einen neuen Eintrag betritt
  if (!eintrag || eintrag.contains(event.relatedTarget)) return;

  tooltip.textContent = eintrag.dataset.info; // textContent statt innerHTML (XSS-sicher)
  tooltip.style.left = `${event.clientX + 12}px`;
  tooltip.style.top = `${event.clientY + 12}px`;
  tooltip.hidden = false;
});

liste.addEventListener('mouseout', (event) => {
  if (!liste.contains(event.relatedTarget)) tooltip.hidden = true;
});

on-Property und Entfernen des Listeners

const button = document.querySelector('#hilfe');

// Variante 1: on-Property (überschreibt einen vorherigen Handler)
button.onmouseover = () => console.log('Hilfe anzeigen');
button.onmouseover = null; // entfernt den Handler

// Variante 2: benannter Handler + removeEventListener
const zeigeHinweis = () => console.log('Hinweis eingeblendet');
button.addEventListener('mouseover', zeigeHinweis);
button.removeEventListener('mouseover', zeigeHinweis);

// Variante 3: AbortController, nur einmal auslösen
const controller = new AbortController();
button.addEventListener('mouseover', () => console.log('Erstes Hover'), {
  once: true,
  signal: controller.signal
});
// später: controller.abort();

// Wichtig · Fallstricke

Aufsteigen vs. mouseenter: mouseover tritt beim Wechsel zwischen Kindelementen immer wieder auf. Das kann Handler mehrfach auslösen und Flackern erzeugen. Wenn du nur das Betreten des Elements selbst brauchst, nimm mouseenter, das nicht aufsteigt. Alternativ prüfst du element.contains(event.relatedTarget).
relatedTarget kann null sein, etwa wenn der Zeiger von außerhalb des Fensters kommt.
Touch-Geräte: Auf Touchscreens gibt es kein echtes Hover. Browser erzeugen mouseover höchstens nachträglich beim Antippen. Wichtige Funktionen dürfen deshalb nicht allein vom Hover abhängen. Für Maus, Stift und Touch gemeinsam eignet sich pointerover.
Barrierefreiheit: Tastaturnutzer lösen mouseover nicht aus. Ergänze deshalb focus/focusin für die gleiche Funktion.
Performance: Aufwendige Arbeit im Handler solltest du drosseln (throttle/debounce). Reine Gestaltung löst du mit CSS :hover.
Sicherheit: Inhalte aus data-*-Attributen oder Nutzereingaben über textContent einfügen, nicht über innerHTML. So vermeidest du XSS.
Kompatibilität: Das Ereignis wird von allen gängigen Browsern seit Langem unterstützt.

Siehe auch

MouseEvent MouseEvent.relatedTarget EventTarget.addEventListener() Element: mousemove Element: mouseenter