--- title: 'Element : évènement mouseenter' slug: Web/API/Element/mouseenter_event tags: - API - DOM - Element - Interface - Reference - mouseenter translation_of: Web/API/Element/mouseenter_event ---
{{APIRef}}

L'évènement mouseenter est déclenché à partir d'un élément {{domxref("Element")}} lorsqu'un dispositif de pointage est déplacé et que son curseur entre sur l'élément.

Se propage/remonte dans le DOM Non
Annulable Non
Interface {{domxref("MouseEvent")}}
Propriété pour la gestion d'évènement {{domxref("GlobalEventHandlers.onmouseenter", "onmouseenter")}}

Notes d'utilisation

Bien que {{domxref("Element/mouseover_event", "mouseover")}} soit similaire, mouseenter est différent et ne remonte pas dans le DOM et qu'il n'est pas envoyé aux descendants lorsque le pointeur passe d'un descendant à l'élément.

mouseenter.png
mouseenter est envoyé à chaque élément de la hiérarchie lorsqu'on rentre sur eux. Voici comment 4 évènements sont envoyés aux éléments lorsque le pointeur atteint le texte.
mouseover.png
Un seul évènement mouseover est envoyé depuis l'élément le plus profond du DOM puis remonte le DOM jusqu'à être annulé ou à atteindre la racine.

Avec des hiérarchies profondes, le nombre d'évènements mouseenter envoyé peut être important et entraîner des problèmes de performances. Dans ce cas, mieux vaut écouter les évènements mouseover.

Avec la combinaison de mouseenter et mouseleave (déclenché quand le pointeur quitte la zone de l'élément), on a un effet fortement semblable à la pseudo-classe CSS {{cssxref(':hover')}}.

Exemples

La documentation mouseover illustre la différence entre mouseover et mouseenter.

Ici, on utilise mouseenter pour modifier la bordure d'un div lorsque la souris rentre sur cet espace. On ajoute alors un élément à la liste avec le nombre d'évènements mouseenter ouor mouseleave event.

HTML

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

CSS

On met en forme le div pour le rendre plus visible.

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

JavaScript

var enterEventCount = 0;
var leaveEventCount = 0;
const mouseTarget = document.getElementById('mouseTarget');
const unorderedList = document.getElementById('unorderedList');

mouseTarget.addEventListener('mouseenter', e => {
  mouseTarget.style.border = '5px dotted orange';
  enterEventCount++;
  addListItem("C'est le " + enterEventCount + "ème mouseenter.");
});

mouseTarget.addEventListener('mouseleave', e => {
  mouseTarget.style.border = '1px solid #333';
  leaveEventCount++;
  addListItem("C'est le " + leaveEventCount + "ème mouseleave.");
});

function addListItem(text) {
  // On crée un nouveau noeud text avec le texte fourni
  var newTextNode = document.createTextNode(text);

  // On crée un élément li
  var newListItem = document.createElement("li");

  // On ajoute le noeud texte à l'élément li
  newListItem.appendChild(newTextNode);

  // On ajoute l'élément de liste à la liste
  unorderedList.appendChild(newListItem);
}

Résultat

{{EmbedLiveSample("Exemples")}}

Spécifications

Spécification État
{{SpecName('UI Events', '#event-type-mouseenter', 'mouseenter')}} {{Spec2('UI Events')}}
{{SpecName('DOM3 Events', '#event-type-mouseenter', 'mouseenter')}} {{Spec2('DOM3 Events')}}

Compatibilité des navigateurs

{{Compat("api.Element.mouseenter_event")}}

Voir aussi