Jquery mouseenter () vs mouseover ()

Então, depois de ler uma pergunta respondida recentemente, não estou claro se realmente entendo a diferença entre o mouseenter()e mouseover(). A postagem afirma

Passe o rato por cima():

Dispara ao entrar em um elemento e sempre que qualquer movimento do mouse ocorrer dentro do elemento.

MouseEnter ():

Dispara ao entrar em um elemento.

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

Eu também tentei ler as definições de JQuery, ambas 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 seu elemento de destino contém elementos filhos:

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

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

$('#my_div').bind("mouseover mouseenter", function(e) {
  var el = $("#" + e.type);
  var n = +el.text();
  el.text(++n);
});

#my_div {
  padding: 0 20px 20px 0;
  background-color: #eee;
  margin-bottom: 10px;
  width: 90px;
  overflow: hidden;
}

#my_div>div {
  float: left;
  margin: 20px 0 0 20px;
  height: 25px;
  width: 25px;
  background-color: #aaa;
}

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

<div>MouseEnter: <span id="mouseenter">0</span></div>
<div>MouseOver: <span id="mouseover">0</span></div>

<div id="my_div">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Este é um dos melhores exemplos que encontrei:

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

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

Embora eles operem da mesma maneira, no entanto, o mouseenterevento é acionado apenas quando o ponteiro do mouse entra no elemento selecionado . O mouseoverevento é acionado se um ponteiro do mouse inserir qualquer elemento filho também .

Veja o código de exemplo e a 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 é acionado apenas quando o ponteiro se move para o elemento associado.

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

O evento mouseleave difere da saída do mouse na maneira como lida com a subida do evento . 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 eventos mousemove , mouseenter e mouseover :

https://jsfiddle.net/z8g613yd/

HTML:

<div onmousemove="myMoveFunction()">
    <p>onmousemove: <br> <span id="demo">Mouse over me!</span></p>
</div>

<div onmouseenter="myEnterFunction()">
    <p>onmouseenter: <br> <span id="demo2">Mouse over me!</span></p>
</div>

<div onmouseover="myOverFunction()">
    <p>onmouseover: <br> <span id="demo3">Mouse over me!</span></p>
</div>

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 (pe espaço).

Pergunta antiga, mas ainda não há uma resposta boa e atualizada com insight imo.

Atualmente, todos os navegadores suportam mouseover/mouseoute mouseenter/mouseleave. No entanto, o jQuery não registra seu manipulador mouseenter/mouseleave, mas silenciosamente os coloca em um invólucro, mouseover/mouseoutcomo mostra o código a seguir e faz sua própria interpretação ligeiramente diferente mouseenter/mouseleave.

O comportamento exato dos eventos é especialmente relevante em "delegados manipuladores". Infelizmente, o jQuery também tem sua própria interpretação diferente do que são os manipuladores delegados e o que eles devem receber para eventos. Esse fato é mostrado em outra resposta para o evento de clique mais simples.

Então, como responder adequadamente a uma pergunta sobre o jQuery, que usa o texto Javascript para eventos e manipuladores, mas torna os dois diferentes e nem menciona isso na documentação?

Primeiro as diferenças no Javascript "real":

• ambos
  • o mouse pode "pular" de elementos externos / externos para elementos internos / internos quando movido mais rapidamente do que o navegador mostra sua posição
  • qualquer enter/overum recebe um correspondente leave/out(possivelmente atrasado / nervoso)
  • os eventos vão para o elemento visível abaixo do ponteiro (invisível → não pode ser alvo)
• mouseenter/mouseleave
  • é entregue ao elemento em que está registrado (destino)
  • sempre que o elemento ou qualquer descendente (por exemplo, saltando) for inserido / deixado
  • não pode borbulhar, porque conceitualmente os descendentes são considerados parte do elemento em questão, ou seja, não há filhos de onde possa vir outro evento (com o significado de "entrou / saiu" dos pais ?!)
  • os filhos também podem ter manipuladores semelhantes registrados, que entram / saem corretamente, mas não relacionados ao ciclo de entrada / saída dos pais
• mouseover/mouseout
  • o alvo é o elemento real abaixo do ponteiro
    • um alvo não pode ser duas coisas: ou seja, pai e filho ao mesmo tempo
  • o evento não pode "aninhar"
    • antes que uma criança possa ser “exagerada”, os pais precisam sair
  • pode borbulhar, porque target / relatedTarget indica onde o evento ocorreu

Após alguns testes, mostra que, desde que você não use o jQuery "delegar manipuladores com registro de seletor", a emulação é desnecessária, mas razoável: filtra os mouseover/mouseouteventos que mouseenter/mouseleavenão seriam obtidos. O alvo está confuso, no entanto. O real mouseenter/mouseleavedaria o elemento manipulador como alvo, a emulação pode indicar filhos desse elemento, ou seja, o que for mouseover/mouseoutcarregado.

const list = document.getElementById('log');
const outer = document.getElementById('outer');
const $outer = $(outer);

function log(tag, event) {
  const li = list.insertBefore(document.createElement('li'), list.firstChild);
  // only jQuery handlers have originalEvent
  const e = event.originalEvent || event;
  li.append(`${tag} got ${e.type} on ${e.target.id}`);
}

outer.addEventListener('mouseenter', log.bind(null, 'JSmouseenter'));
$outer.on('mouseenter', log.bind(null, '$mouseenter'));

div {
  margin: 20px;
  border: solid black 2px;
}

#inner {
  min-height: 80px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div id=outer>
    <ul id=log>
    </ul>
  </div>
</body>