Element : évènement mouseenter

L'évènement mouseenter est déclenché à partir d'un élément 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 MouseEvent
Propriété pour la gestion d'évènement onmouseenter

Notes d'utilisation

Bien que 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 :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

Spécifications

Spécification État
UI Events
La définition de 'mouseenter' dans cette spécification.
Version de travail
Document Object Model (DOM) Level 3 Events Specification
La définition de 'mouseenter' dans cette spécification.
Obsolete

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
mouseenter eventChrome Support complet 30Edge Support complet 12Firefox Support complet 10IE Support complet 5.5Opera Support complet 17Safari Support complet 6.1WebView Android Support complet ≤37Chrome Android Support complet 30Firefox Android Support complet 10Opera Android Support complet 18Safari iOS Support complet 6.1Samsung Internet Android Support complet 2.0

Légende

Support complet  
Support complet

Voir aussi