mouseenter - mouseover javascript

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

Question

Siempre he usado el evento mouseover, pero al leer la documentación de jquery encontré mouseenter. Parecen funcionar exactamente igual. ¿Hay alguna diferencia entre los dos y, de ser así, cuándo debo usarlos? (También se aplica para mouseout vs mouseleave)

Answer 1

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

Me lo imagino, porque uno de los objetivos de jQuery es hacer que las cosas sean independientes del navegador, que usar cualquiera de los nombres de los eventos generará el mismo comportamiento. Editar: gracias a otras publicaciones, ahora veo que este no es el caso

Answer 2

Lo explica bastante bien here

Answer 3

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

Aquí hay un article que describe el comportamiento.

Answer 4

Puede probar el siguiente ejemplo de la página jQuery doc . Es una pequeña y agradable demostración interactiva que lo deja muy claro y puedes verlo por ti 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 un evento mouse over ocurre en un elemento cuando está sobre él, proveniente de su hijo O elemento primario, pero un evento de entrada del mouse solo ocurre cuando el mouse se mueve desde afuera de este elemento a este elemento.

O como mouseover() el mouseover() 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 filtrará a Outer. Esto puede activar nuestro controlador de mouseover encuadernado en momentos inoportunos. Consulte la discusión sobre .mouseenter() para una alternativa útil.

Answer 5

Solo Chrome le permite sugerir un nombre para usar al hacer clic en un enlace con contenido generado dinámicamente. Sin embargo, puede generar el contenido cuando el cursor del mouse esté sobre el enlace y ponerlo como DATAURI en un href estático estándar. Esto habilita la opción "Guardar enlace como ..." en el menú contextual.

function download_content(a, side) 
{
    a.innerHTML = "preparing content..";

    var txt = "call a function to generate content";
    var datauri = "data:plain/text;charset=UTF-8," + encodeURIComponent(txt);
    a.setAttribute(''download'', "chrome_let_you_suggest_a_name.txt");
    a.setAttribute(''href'', datauri);

    a.innerHTML = "content ready.";
}
document.getElementById(''my_a_link'').addEventListener(''mouseover'', function() { download_content(this); });

<a id="my_a_link" href="#">save document</a>

Answer 6

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