Jquery mouseenter () vs mouseover ()

Então, depois de ler uma questão respondida recentemente, não estou claro se realmente entendi a diferença entre o mouseenter() e mouseover() . O post afirma

Passe o rato por cima():

Disparará ao entrar em um elemento e sempre que algum movimento do mouse ocorrer dentro do elemento.

MouseEnter ():

Disparará ao entrar em um elemento.

Eu inventei um violino que usa ambos e eles parecem ser bem parecidos. Alguém pode me explicar a diferença entre os dois?

Eu também tentei ler as definições do JQuery, ambos dizem a mesma coisa.

O evento mouseover é enviado para um elemento quando o ponteiro do mouse entra no elemento

O evento mouseenter é enviado para um elemento quando o ponteiro do mouse entra no elemento.

Alguém pode esclarecer com um exemplo?

Você vê o comportamento quando o elemento de destino contém elementos filhos:

http://jsfiddle.net/ZCWvJ/7/

Cada vez que o mouse entra ou sai de um elemento filho, o mouseover é acionado, mas não o mouseenter .

Este é um dos melhores exemplos que encontrei:

  • mouseenter
  • passe o rato por cima
  • mouseout
  • mouseleave

http://bl.ocks.org/mbostock/5247027

Embora eles funcionem da mesma maneira, no entanto, o evento mouseentertriggers quando o ponteiro do mouse entra no elemento selecionado . O evento mouseover é acionado se um ponteiro do mouse entrar em qualquer elemento filho também .

Veja o exemplo de código e demonstração na parte inferior da página de documentação do jquery:

http://api.jquery.com/mouseenter/

… o mouseover é acionado quando o ponteiro se move para o elemento filho também, enquanto o mouseenter triggers apenas quando o ponteiro se move para o elemento vinculado.

O evento mouseenter difere do mouseover na forma como ele manipula o borbulhamento de events . O evento mouseenter , apenas aciona seu manipulador quando o mouse entra no elemento ao qual está vinculado, não um descendente . Consulte: https://api.jquery.com/mouseenter/

O evento mouseleave difere do mouseout na forma como ele manipula o borbulhamento de events . O evento mouseleave , somente aciona seu manipulador quando o mouse deixa o elemento ao qual está vinculado, não um descendente . Consulte: https://api.jquery.com/mouseleave/

Este exemplo demonstra a diferença entre os events mousemove , mouseenter e mouseover :

https://jsfiddle.net/z8g613yd/

HTML:

 

onmousemove:
Mouse over me!

onmouseenter:
Mouse over me!

onmouseover:
Mouse over me!

CSS:

 div { width: 200px; height: 100px; border: 1px solid black; margin: 10px; float: left; padding: 30px; text-align: center; background-color: lightgray; } p { background-color: white; height: 50px; } p span { background-color: #86fcd4; padding: 0 20px; } 

JS:

 var x = 0; var y = 0; var z = 0; function myMoveFunction() { document.getElementById("demo").innerHTML = z += 1; } function myEnterFunction() { document.getElementById("demo2").innerHTML = x += 1; } function myOverFunction() { document.getElementById("demo3").innerHTML = y += 1; } 
  • onmousemove : ocorre toda vez que o ponteiro do mouse é movido sobre o elemento div.
  • onmouseenter : ocorre apenas quando o ponteiro do mouse entra no elemento div.
  • onmouseover : ocorre quando o ponteiro do mouse entra no elemento div e seus elementos filhos (p e span).