Element: mouseenter-Ereignis

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignis-Handler-Eigenschaft.

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

onmouseenter = (event) => { }

Ereignistyp

Ein MouseEvent. Erbt von UIEvent und Event.

Verwendungshinweise

Obwohl es dem mouseover ähnlich ist, unterscheidet sich mouseenter darin, dass es nicht bubble und nicht an Nachkommen gesendet wird, wenn der Zeiger von einem Nachkommen in seinen eigenen physischen Raum bewegt wird. Abgesehen davon werden enter- und over-Ereignisse für die gleiche Situation gleichzeitig ausgelöst, wenn dies zutreffend ist.

Verhalten von mouseenter-Ereignissen

Dies beschreibt die mouseenter-Ereignisse, die von vier konzentrischen divs ohne Padding oder Rand empfangen werden, sodass die Ereignisse alle gleichzeitig auftreten: Ein mouseenter-Ereignis wird an jedes Element der Hierarchie gesendet, wenn man in diese eintritt. Hier werden 4 Ereignisse an die vier Elemente der Hierarchie gesendet, wenn der Zeiger den Text erreicht.

Verhalten von mouseover-Ereignissen

Ein einziges mouseover-Ereignis wird an das tiefste Element des DOM-Baums gesendet und dann in der Hierarchie nach oben geleitet, bis es von einem Handler abgebrochen wird oder die Wurzel erreicht.

Bei tiefen Hierarchien kann die Anzahl der gesendeten mouseenter-Ereignisse ziemlich groß sein und erhebliche Leistungsprobleme verursachen. In solchen Fällen ist es besser, mouseover-Ereignisse zu überwachen.

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

Beispiele

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

Mouseenter

Das folgende triviale Beispiel verwendet das mouseenter-Ereignis, um den Rand des div zu ändern, wenn die Maus den dafür vorgesehenen Bereich betritt. Anschließend wird der Liste ein Eintrag mit der Nummer des mouseenter- oder mouseleave-Ereignisses hinzugefügt.

HTML

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

CSS

Stilisierung des div, um es sichtbarer zu machen.

#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