Element: mouseenter-Ereignis

Syntax

Verwenden Sie den Ereignisnamen in addEventListener():

addEventListener("mouseenter", (event) => { })

Alternativ können Sie die Event-Handler-Eigenschaft der Schnittstelle verwenden:

onmouseenter = (event) => { }

Ereignistyp

Ein MouseEvent. Erbt von UIEvent und Event.

Hinweise zur Verwendung

Obwohl mouseenter mouseover ähnelt, unterscheidet es sich dadurch, dass es nicht aufsteigt und nicht an Nachfahren gesendet wird, wenn der Zeiger aus dem sichtbaren Bereich eines Nachfahren in den sichtbaren Bereich des Elements selbst bewegt wird. Abgesehen davon werden mouseenter- und mouseover-Ereignisse für dieselbe Situation gegebenenfalls gleichzeitig ausgelöst.

Verhalten von mouseenter-Ereignissen

Die folgende Abbildung zeigt die mouseenter-Ereignisse, die jedes von vier ineinander verschachtelten div-Elementen ohne Innen- oder Außenabstand empfängt. Daher treten alle Ereignisse gleichzeitig auf: Beim Eintritt in die Elemente wird an jedes Element der Hierarchie ein mouseenter-Ereignis gesendet. Hier werden vier Ereignisse an die vier Elemente der Hierarchie gesendet, wenn der Zeiger den Text erreicht.

Verhalten von mouseover-Ereignissen

Ein einzelnes mouseover-Ereignis wird an das am tiefsten verschachtelte Element des DOM-Baums gesendet. Anschließend steigt es in der Hierarchie auf, bis es durch einen Handler abgebrochen wird oder die Wurzel erreicht.

Bei tiefen Hierarchien kann die Zahl der gesendeten mouseenter-Ereignisse sehr groß werden und erhebliche Leistungsprobleme verursachen. In solchen Fällen ist es besser, auf mouseover-Ereignisse zu reagieren.

Zusammen mit dem zugehörigen mouseleave-Ereignis (das beim Element ausgelöst wird, wenn die Maus dessen Inhaltsbereich verlässt) verhält sich das mouseenter-Ereignis sehr ähnlich wie die CSS-Pseudoklasse :hover.

Beispiele

Die Dokumentation zu mouseover enthält ein Beispiel, das den Unterschied zwischen mouseover und mouseenter veranschaulicht.

mouseenter

Das folgende einfache Beispiel verwendet das mouseenter-Ereignis, um den Rahmen des div zu ändern, wenn die Maus in den ihm zugewiesenen Bereich gelangt. Anschließend fügt es der Liste einen Eintrag mit der Nummer des mouseenter- oder mouseleave-Ereignisses hinzu.

HTML

<div id="mouseTarget">
  <ul id="unorderedList">
    <li>No events yet!</li>
  </ul>
</div>

CSS

Das div wird gestaltet, damit es besser sichtbar ist.

#mouseTarget {
  box-sizing: border-box;
  width: 15rem;
  border: 1px solid #333333;
}

JavaScript

let enterEventCount = 0;
let leaveEventCount = 0;
const mouseTarget = document.getElementById("mouseTarget");
const unorderedList = document.getElementById("unorderedList");

mouseTarget.addEventListener("mouseenter", (e) => {
  mouseTarget.style.border = "5px dotted orange";
  enterEventCount++;
  addListItem(`This is mouseenter event ${enterEventCount}.`);
});

mouseTarget.addEventListener("mouseleave", (e) => {
  mouseTarget.style.border = "1px solid #333333";
  leaveEventCount++;
  addListItem(`This is mouseleave event ${leaveEventCount}.`);
});

function addListItem(text) {
  // Create a new text node using the supplied text
  const newTextNode = document.createTextNode(text);

  // Create a new li element
  const newListItem = document.createElement("li");

  // Add the text node to the li element
  newListItem.appendChild(newTextNode);

  // Add the newly created list item to list
  unorderedList.appendChild(newListItem);
}

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Lernen: Einführung in Ereignisse
• mousedown
• mouseup
• mousemove
• click
• dblclick
• mouseover
• mouseout
• mouseleave
• contextmenu
• pointerenter