Jquery mouseenter () vs mouseover ()

Entonces, después de leer una pregunta recientemente respondida , no estoy claro si realmente entiendo la diferencia entre el mouseenter()y mouseover(). La publicación dice

Ratón sobre():

Se disparará al ingresar a un elemento y siempre que ocurra algún movimiento del mouse dentro del elemento.

MouseEnter ():

Se disparará al entrar en un elemento.

Se me ocurrió un violín que usa ambos y parecen ser bastante similares. ¿Puede alguien explicarme la diferencia entre los dos?

También he intentado leer las definiciones de JQuery, ambas dicen lo mismo.

El evento mouseover se envía a un elemento cuando el puntero del mouse ingresa al elemento

El evento mouseenter se envía a un elemento cuando el puntero del mouse ingresa al elemento.

¿Alguien puede aclarar con un ejemplo?

Usted ve el comportamiento cuando su elemento objetivo contiene elementos secundarios:

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

Cada vez que su mouse ingresa o sale de un elemento hijo, mouseoverse activa, pero no 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 es uno de los mejores ejemplos que he encontrado de:

• mouseenter
• ratón sobre
• mouseout
• mouseleave

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

Aunque funcionan de la misma manera, sin embargo, el mouseenterevento solo se dispara cuando el puntero del mouse ingresa al elemento seleccionado . El mouseoverevento se activa si un puntero del mouse también ingresa a elementos secundarios .

Vea el código de ejemplo y la demostración en la parte inferior de la página de documentación de jquery:

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

... el mouseover se dispara cuando el puntero se mueve también al elemento secundario, mientras que mouseenter se dispara solo cuando el puntero se mueve al elemento enlazado.

El evento mouseenter difiere del mouseover en la forma en que maneja el burbujeo de eventos . El evento mouseenter solo activa su controlador cuando el mouse ingresa al elemento que está vinculado, no a un descendiente . Consulte: https://api.jquery.com/mouseenter/

El evento mouseleave difiere del mouseout en la forma en que maneja el burbujeo de eventos . El evento mouseleave solo activa su controlador cuando el mouse abandona el elemento al que está vinculado, no un descendiente . Consulte: https://api.jquery.com/mouseleave/

Este ejemplo demuestra la diferencia entre los eventos mousemove , mouseenter y 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 : ocurre cada vez que el puntero del mouse se mueve sobre el elemento div.
• onmouseenter : solo ocurre cuando el puntero del mouse ingresa al elemento div.
• onmouseover : ocurre cuando el puntero del mouse ingresa al elemento div y sus elementos secundarios (p y span).

Vieja pregunta, pero todavía no hay una buena respuesta actualizada con perspicacia de la OMI.

En estos días, todos los navegadores son compatibles mouseover/mouseouty mouseenter/mouseleave. Sin embargo, jQuery no registra su manejador mouseenter/mouseleave, sino que los coloca silenciosamente en envoltorios mouseover/mouseoutcomo lo muestra el siguiente código y hace su propia interpretación ligeramente diferente demouseenter/mouseleave .

El comportamiento exacto de los eventos es especialmente relevante en los "controladores de delegados". Desafortunadamente, jQuery también tiene su propia interpretación diferente de qué son los controladores de delegados y qué deben recibir para los eventos. Ese hecho se muestra en otra respuesta para el evento de clic más simple.

Entonces, ¿cómo responder adecuadamente una pregunta sobre jQuery, que utiliza la redacción de Javascript para eventos y controladores, pero hace que ambos sean diferentes y ni siquiera menciona eso en su documentación?

Primero las diferencias en Javascript "real":

• ambos
  • el mouse puede "saltar" de elementos externos / externos a elementos internos / internos cuando se mueve más rápido de lo que el navegador muestra su posición
  • cualquiera enter/overobtiene un correspondiente leave/out(posiblemente tarde / nervioso)
  • los eventos van al elemento visible debajo del puntero (invisible → no puede ser objetivo)
• mouseenter/mouseleave
  • se entrega al elemento donde está registrado (objetivo)
  • siempre que el elemento o cualquier descendiente (por ejemplo, saltando) se ingresa / se deja
  • no puede burbujear, porque conceptualmente los descendientes se consideran parte del elemento en cuestión, es decir, no hay niños de donde pueda venir otro evento (¡con el significado de "ingresado / dejado" al padre?)
  • los niños también pueden tener controladores similares registrados, que ingresan / salen correctamente, pero no están relacionados con el ciclo de entrada / salida de los padres
• mouseover/mouseout
  • el objetivo es el elemento real debajo del puntero
    • un objetivo no puede ser dos cosas: es decir, no padre e hijo al mismo tiempo
  • el evento no puede "anidar"
    • antes de que un niño pueda ser "cubierto", el padre necesita "salir"
  • puede burbujear, porque target / relatedTarget indica dónde ocurrió el evento

Después de algunas pruebas, muestra que mientras no use jQuery "controladores de delegado con registro de selector", la emulación es innecesaria pero razonable: filtra mouseover/mouseouteventos que mouseenter/mouseleaveno se obtendrían. Sin embargo, el objetivo está desordenado. Lo real mouseenter/mouseleavele daría al elemento controlador como objetivo, la emulación podría indicar hijos de ese elemento, es decir, lo que sea que mouseover/mouseoutlleve.

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>