Qual è la differenza tra gli eventi mouseover e mouseenter?

Ho sempre usato l' mouseoverevento, ma durante la lettura della documentazione di jQuery ho trovato mouseenter. Sembrano funzionare esattamente allo stesso modo.

C'è una differenza tra i due e, in tal caso, quando dovrei usarli?
(Vale anche per mouseoutvs mouseleave).

Puoi provare il seguente esempio dalla pagina del documento jQuery . È una bella demo interattiva che lo rende molto chiaro e puoi davvero vederlo da solo.

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>

In breve, noterai che un evento mouse over si verifica su un elemento quando ci sei sopra - proveniente dal suo elemento figlio O padre, ma un evento enter mouse si verifica solo quando il mouse si sposta dall'esterno di questo elemento a questo elemento.

O come mouseover()dicono i documenti :

[ .mouseover()] può causare molti mal di testa a causa del gorgoglio degli eventi. Ad esempio, quando il puntatore del mouse si sposta sull'elemento interno in questo esempio, un evento di passaggio del mouse verrà inviato a quello, quindi scorrerà verso l'esterno. Ciò può attivare il nostro gestore di mouseover associato in momenti inopportuni. Vedi la discussione per .mouseenter()un'alternativa utile.

Mouseenter e mouseleaveve non reagiscono al gorgoglio degli eventi, mentre mouseover e mouseout lo fanno .

Ecco un articolo che descrive il comportamento.

Come spesso accade con domande come queste, Quirksmode ha la risposta migliore .

Immagino che, poiché uno degli obiettivi di jQuery è quello di rendere agnostico il browser delle cose, l'utilizzo di uno dei nomi degli eventi attiverà lo stesso comportamento. Modifica: grazie ad altri post, ora vedo che non è così

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