Quelle est la différence entre les événements mouseover et mouseenter?

J'ai toujours utilisé l' mouseoverévénement, mais en lisant la documentation jQuery, j'ai trouvé mouseenter. Ils semblent fonctionner exactement de la même manière.

Y a-t-il une différence entre les deux, et si oui, quand dois-je les utiliser?
(S'applique également pour mouseoutvs mouseleave).

Vous pouvez essayer l'exemple suivant à partir de la page de documentation jQuery . C'est une jolie petite démo interactive qui le rend très clair et que vous pouvez voir par vous-même.

var i = 0;
$("div.overout")
  .mouseover(function() {
    i += 1;
    $(this).find("span").text("mouse over x " + i);
  })
  .mouseout(function() {
    $(this).find("span").text("mouse out ");
  });

var n = 0;
$("div.enterleave")
  .mouseenter(function() {
    n += 1;
    $(this).find("span").text("mouse enter x " + n);
  })
  .mouseleave(function() {
    $(this).find("span").text("mouse leave");
  });

div.out {
  width: 40%;
  height: 120px;
  margin: 0 15px;
  background-color: #d6edfc;
  float: left;
}

div.in {
  width: 60%;
  height: 60%;
  background-color: #fc0;
  margin: 10px auto;
}

p {
  line-height: 1em;
  margin: 0;
  padding: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="out overout">
  <span>move your mouse</span>
  <div class="in">
  </div>
</div>

<div class="out enterleave">
  <span>move your mouse</span>
  <div class="in">
  </div>
</div>

En bref, vous remarquerez qu'un événement de survol de la souris se produit sur un élément lorsque vous le survolez - provenant de son élément enfant OU parent, mais un événement d'entrée de la souris se produit uniquement lorsque la souris se déplace de l'extérieur de cet élément vers cet élément.

Ou comme le mouseover()disent les documents :

[ .mouseover()] peut causer de nombreux maux de tête en raison du bouillonnement d'événements. Par exemple, lorsque le pointeur de la souris se déplace sur l'élément Inner dans cet exemple, un événement mouseover sera envoyé à celui-ci, puis remontera vers Outer. Cela peut déclencher notre gestionnaire de survol de souris lié à des moments inopportuns. Voir la discussion .mouseenter()pour une alternative utile.

Mouseenter et mouseleave ne réagissent à un barbotage d'événements, alors que mouseover et mouseOut font .

Voici un article qui décrit le comportement.

Comme c'est souvent le cas avec des questions comme celles-ci, Quirksmode a la meilleure réponse .

J'imagine que, parce que l'un des objectifs de jQuery est de rendre les choses indépendantes du navigateur, l'utilisation de l'un ou l'autre des noms d'événement déclenchera le même comportement. Edit: grâce à d'autres articles, je vois maintenant que ce n'est pas le cas

$(document).ready(function() {
$("#outer_mouseover").bind
("Mouse Over Mouse Out",function(event){
console.log(event.type," :: ",this.id);})
$("#outer_mouseenter").bind
("Mouse enter Mouse leave",function(event){
console.log(event.type," :: ",this.id);})
 });