Jaka jest różnica między zdarzeniami mouseover i mouseenter?

Od zawsze korzystałem ze mouseoverzdarzenia, ale czytając dokumentację jQuery znalazłem mouseenter. Wydają się działać dokładnie tak samo.

Czy jest między nimi różnica, a jeśli tak, to kiedy należy ich używać?
(Dotyczy również mouseoutVS mouseleave).

Możesz wypróbować następujący przykład ze strony dokumentacji jQuery . To ładne, interaktywne demo, które sprawia, że ​​jest bardzo jasne i możesz się o tym przekonać.

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>

Krótko mówiąc, zauważysz, że zdarzenie myszy nad elementem występuje na elemencie, gdy jesteś nad nim - pochodzącym z jego elementu podrzędnego LUB nadrzędnego, ale zdarzenie wejścia myszą występuje tylko wtedy, gdy mysz przesuwa się z zewnątrz tego elementu do tego elementu.

Lub jakmouseover() ujął to dokumentacja :

[ .mouseover()] może powodować wiele bólów głowy z powodu bulgotania zdarzeń. Na przykład, gdy wskaźnik myszy przesunie się nad elementem wewnętrznym w tym przykładzie, zostanie do niego wysłane zdarzenie najechania myszą, a następnie przepłynie do Outer. Może to spowodować wyzwolenie naszego programu obsługi ruchu myszy w nieodpowiednich momentach. Zobacz dyskusję na temat .mouseenter()użytecznej alternatywy.

Mouseenter i mouseleave nie reagują na bulgotanie zdarzeń, podczas gdy najeżdżanie myszą i wyprowadzanie myszy tak .

Oto artykuł opisujący zachowanie.

Jak to często bywa w przypadku takich pytań, Quirksmode ma najlepszą odpowiedź .

Wyobrażam sobie, że ponieważ jednym z celów jQuery jest uczynienie rzeczy agnostycznych przeglądarkami, użycie dowolnej nazwy zdarzenia wywoła to samo zachowanie. Edycja: dzięki innym postom, teraz widzę, że tak nie jest

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