Element : évènement mouseenter

Syntaxe

Utilisez le nom de l'évènement dans des méthodes comme addEventListener(), ou définissez une propriété gestionnaire d'évènement.

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

onmouseenter = (event) => { }

Type d'évènement

Un objet MouseEvent. Hérite de UIEvent et de Event.

Notes d'utilisation

Bien que mouseover soit similaire, mouseenter diffère en ce qu'il ne se propage pas et qu'il n'est pas envoyé aux descendants lorsque le pointeur passe de l'espace physique d'un de ses descendants à son propre espace physique. À part cela, les évènements mouseenter et mouseover pour la même situation sont déclenchés en même temps, si nécessaire.

Comportement des évènements mouseenter

Cela décrit les évènements entrée de souris reçus par chacun des quatre <div> concentriques sans remplissage ni marge, donc les évènements se produisent tous en même temps : Un évènement mouseenter est envoyé à chaque élément de la hiérarchie lorsqu'on y entre. Ici, 4 évènements sont envoyés aux quatre éléments de la hiérarchie lorsque le pointeur atteint le texte.

Comportement des évènements mouseover

Un seul évènement mouseover est envoyé à l'élément le plus profond de l'arborescence DOM, puis il remonte la hiérarchie jusqu'à ce qu'il soit annulé par un gestionnaire ou qu'il atteigne la racine.

Dans le cas de hiérarchies profondes, le nombre d'évènements mouseenter envoyés peut être très important et entraîner des problèmes de performances significatifs. Dans de tels cas, il est préférable d'écouter les évènements mouseover.

Combiné à l'évènement mouseleave correspondant (qui est déclenché au niveau de l'élément lorsque la souris quitte sa zone de contenu), l'évènement mouseenter agit de manière très similaire à la pseudo-classe CSS :hover.

Exemples

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

mouseenter

L'exemple trivial suivant utilise l'évènement mouseenter pour modifier la bordure du div lorsque la souris entre dans l'espace qui lui est attribué. Il ajoute ensuite un élément à la liste avec le nombre d'évènements mouseenter ou mouseleave.

HTML

<div id="cibleSouris">
  <ul id="listeNonOrdonnee">
    <li>Pas d'évènements pour le moment !</li>
  </ul>
</div>

CSS

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

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

JavaScript

let compteEventEntree = 0;
let compteEventSortie = 0;
const cibleSouris = document.getElementById("cibleSouris");
const listeNonOrdonnee = document.getElementById("listeNonOrdonnee");

cibleSouris.addEventListener("mouseenter", (e) => {
  cibleSouris.style.border = "5px dotted orange";
  compteEventEntree++;
  ajouterDansListe(
    `Ceci est l'évènement mouseenter numéro ${compteEventEntree}.`,
  );
});

cibleSouris.addEventListener("mouseleave", (e) => {
  cibleSouris.style.border = "1px solid #333333";
  compteEventSortie++;
  ajouterDansListe(
    `Ceci est l'évènement mouseleave numéro ${compteEventSortie}.`,
  );
});

function ajouterDansListe(texte) {
  // Crée un nouveau nœud de texte utilisant le texte fournit
  const nouveauNoeudTexte = document.createTextNode(texte);

  // Crée un nouvel élément li
  const nouvelElementListe = document.createElement("li");

  // Ajoute le nœud de texte à l'élément li
  nouvelElementListe.appendChild(nouveauNoeudTexte);

  // Ajoute l'élément de liste nouvellement créé à la liste
  listeNonOrdonnee.appendChild(nouvelElementListe);
}

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• Apprendre : Introduction aux évènements
• L'évènement mousedown
• L'évènement mouseup
• L'évènement mousemove
• L'évènement click
• L'évènement dblclick
• L'évènement mouseover
• L'évènement mouseout
• L'évènement mouseleave
• L'évènement contextmenu
• L'évènement pointerenter