Element: mouseenter — Ereignis · JavaScript-Referenz

Signatur

element.addEventListener("mouseenter", handler)

Beschreibung

Das mouseenter-Ereignis wird an einem Element ausgelöst, wenn der Mauszeiger (oder ein anderes Zeigegerät) von außen in den Bereich des Elements bzw. eines seiner Nachfahren bewegt wird. Registriert wird es über element.addEventListener("mouseenter", handler) oder über die Eigenschaft element.onmouseenter = handler. Das übergebene Ereignisobjekt ist ein MouseEvent.

Der wichtigste Unterschied zu mouseover: mouseenter blubbert nicht (bubbles: false) und wird nicht erneut ausgelöst, wenn der Zeiger zwischen Kindelementen wechselt. Bei tief verschachtelten Strukturen erhält stattdessen jedes Element der Hierarchie, das neu betreten wird, ein eigenes mouseenter. Das macht das Ereignis ideal für Hover-Effekte, Tooltips, Vorschau-Karten oder das Pausieren von Slidern, weil kein lästiges „Flackern“ durch Kindelemente entsteht.

Das Gegenstück ist mouseleave. Beide werden typischerweise als Paar eingesetzt. Für Geräte-unabhängige Logik (Maus, Stift, Touch) bieten sich die analogen Pointer-Events pointerenter/pointerleave an.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignisname `"mouseenter"`.
$handler Pflicht	(event: MouseEvent) => void		Callback, der ein `MouseEvent` mit u. a. `clientX`, `clientY`, `relatedTarget` (Element, von dem der Zeiger kam) und Modifikatortasten erhält.
$options	boolean \| AddEventListenerOptions	false	Optionen wie `once`, `passive`, `signal` oder `capture`.

Rückgabewert

Typ

void

Beschreibung

addEventListener gibt undefined zurück. Der Handler-Rückgabewert wird ignoriert.

Beispiele

Hover-Hervorhebung mit mouseenter und mouseleave

const card = document.querySelector('.card');

card.addEventListener('mouseenter', (event) => {
  card.classList.add('is-hovered');
  console.log('Betreten von:', event.relatedTarget?.tagName ?? 'außerhalb');
});

card.addEventListener('mouseleave', () => {
  card.classList.remove('is-hovered');
});

Betreten von: BODY

Tooltip anzeigen und Listener wieder entfernen

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

const showTooltip = (event) => {
  tooltip.style.left = `${event.clientX + 12}px`;
  tooltip.style.top = `${event.clientY + 12}px`;
  tooltip.hidden = false;
};
const hideTooltip = () => { tooltip.hidden = true; };

button.addEventListener('mouseenter', showTooltip);
button.addEventListener('mouseleave', hideTooltip);

// Später, z. B. wenn die Hilfe deaktiviert wird:
const disableHelp = () => {
  button.removeEventListener('mouseenter', showTooltip);
  button.removeEventListener('mouseleave', hideTooltip);
};

Über die on-Property: Slider pausieren

const slider = document.querySelector('.slider');
let timer = setInterval(() => console.log('Nächstes Bild'), 3000);

slider.onmouseenter = () => {
  clearInterval(timer);
  console.log('Slider pausiert');
};

slider.onmouseleave = () => {
  timer = setInterval(() => console.log('Nächstes Bild'), 3000);
  console.log('Slider läuft weiter');
};

// Entfernen: slider.onmouseenter = null;

Slider pausiert Slider läuft weiter

Unterschied zu mouseover demonstrieren

// HTML: <div id="outer"><span>Kind 1</span><span>Kind 2</span></div>
const outer = document.querySelector('#outer');
let enter = 0;
let over = 0;

outer.addEventListener('mouseenter', () => console.log('mouseenter', ++enter));
outer.addEventListener('mouseover', () => console.log('mouseover', ++over));

// Zeiger fährt in #outer und dann über beide Kinder:

mouseenter 1 mouseover 1 mouseover 2 mouseover 3

// Wichtig · Fallstricke

Keine Event-Delegation: Da mouseenter nicht blubbert, funktioniert ein einzelner Listener am Elternelement für viele Kinder nicht wie gewohnt. Für Delegation mouseover/mouseout mit event.target.closest() verwenden – oder den Listener in der Capture-Phase ({ capture: true }) registrieren.
Touch-Geräte: Auf Touchscreens gibt es keinen echten Hover. Browser erzeugen beim Antippen teils emulierte Maus-Ereignisse, das Verhalten ist aber uneinheitlich. Wichtige Inhalte nie ausschließlich per Hover erreichbar machen – auch aus Gründen der Barrierefreiheit (Tastaturnutzer: zusätzlich focus/focusin behandeln).
Wird ein Element unter einem ruhenden Zeiger eingefügt oder verschoben, feuert mouseenter oft erst bei der nächsten Mausbewegung.
Reine optische Hover-Effekte lassen sich meist performanter mit der CSS-Pseudoklasse :hover umsetzen.
removeEventListener benötigt dieselbe Funktionsreferenz – anonyme Pfeilfunktionen lassen sich nicht entfernen; alternativ AbortController mit der Option signal nutzen.
Kompatibilität: In allen modernen Browsern unterstützt; historisch ursprünglich eine Internet-Explorer-Erweiterung, später standardisiert.

Siehe auch

MouseEvent EventTarget.addEventListener() Element: beforematch Element: mouseover Element: mouseleave