Qual é a diferença entre os eventos mouseover e mouseenter?

Eu sempre usei o mouseoverevento, mas ao ler a documentação do jQuery que encontrei mouseenter. Eles parecem funcionar exatamente da mesma maneira.

Existe uma diferença entre os dois e, se sim, quando devo usá-los?
(Também se aplica a mouseoutvs mouseleave).

Você pode experimentar o seguinte exemplo na página de documentos do jQuery . É uma demonstração agradável e interativa que torna muito claro e você pode realmente ver por si mesmo.

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>

Em resumo, você notará que um evento de mouse over ocorre em um elemento quando você está sobre ele - proveniente do elemento filho OU pai, mas um evento de entrada do mouse ocorre apenas quando o mouse se move de fora desse elemento para esse elemento.

Ou, como mouseover()dizem os documentos :

[ .mouseover()] pode causar muitas dores de cabeça devido a bolhas de eventos. Por exemplo, quando o ponteiro do mouse se move sobre o elemento Inner neste exemplo, um evento de mouseover será enviado para ele e, em seguida, subirá para Outer. Isso pode acionar nosso manipulador de mouseover vinculado em momentos inoportunos. Veja a discussão .mouseenter()para uma alternativa útil.

Mouseenter e mouseleave não reagir a subida do evento, enquanto mouseover e mouseout fazer .

Aqui está um artigo que descreve o comportamento.

Como geralmente acontece com perguntas como essas, o Quirksmode tem a melhor resposta .

Eu imagino que, como um dos objetivos do jQuery é tornar as coisas independentes do navegador, o uso de qualquer nome de evento desencadeará o mesmo comportamento. Edit: graças a outras postagens, agora vejo que não é esse o 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);})
 });