¿Cuál es la diferencia entre los eventos mouseover y mouseenter?

Siempre he usado el mouseoverevento, pero mientras leía la documentación de jQuery que encontré mouseenter. Parecen funcionar exactamente igual.

¿Hay alguna diferencia entre los dos? De ser así, ¿cuándo debo usarlos?
(También se aplica para mouseoutvs mouseleave).

Puede probar el siguiente ejemplo desde la página de jQuery doc . Es una pequeña demostración interactiva que lo deja muy claro y que puede verlo usted mismo.

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 resumen, notará que se produce un evento de mouse sobre un elemento cuando está sobre él, proveniente de su elemento hijo O padre, pero un evento de mouse enter solo ocurre cuando el mouse se mueve desde fuera de este elemento a este elemento.

O como mouseover()dicen los documentos :

[ .mouseover()] puede causar muchos dolores de cabeza debido al burbujeo del evento. Por ejemplo, cuando el puntero del mouse se mueve sobre el elemento Interno en este ejemplo, se enviará un evento mouseover a ese, luego se deslizará hacia Outer. Esto puede activar nuestro controlador de mouseover enlazado en momentos inoportunos. Vea la discusión .mouseenter()para una alternativa útil.

Mouseenter y mouseleave no reaccionan al evento de burbujeo, mientras que mouseover y mouseout lo hacen .

Aquí hay un artículo que describe el comportamiento.

Como suele ser cierto con preguntas como estas, Quirksmode tiene la mejor respuesta .

Me imagino que, debido a que uno de los objetivos de jQuery es hacer que las cosas sean agnósticas para el navegador, el uso de cualquier nombre de evento desencadenará el mismo comportamiento. Editar: gracias a otras publicaciones, ahora veo que este no es el caso

$(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);})
 });