Was ist der Unterschied zwischen Mouseover- und Mouseenter-Ereignissen?

Ich habe das mouseoverEreignis immer verwendet , aber beim Lesen der jQuery-Dokumentation habe ich gefunden mouseenter. Sie scheinen genau gleich zu funktionieren.

Gibt es einen Unterschied zwischen den beiden und wenn ja, wann sollte ich sie verwenden?
(Gilt auch für mouseoutvs mouseleave).

Sie können das folgende Beispiel auf der jQuery-Dokumentseite ausprobieren . Es ist eine nette kleine, interaktive Demo, die es sehr deutlich macht und Sie selbst sehen können.

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>

Kurz gesagt, Sie werden feststellen, dass ein Mouse-Over-Ereignis für ein Element auftritt, wenn Sie sich darüber befinden - entweder von seinem untergeordneten oder seinem übergeordneten Element. Ein Mauseingabeereignis tritt jedoch nur auf, wenn sich die Maus von außerhalb dieses Elements zu diesem Element bewegt.

Oder wie die mouseover()Dokumente es ausdrücken:

[ .mouseover()] kann aufgrund von Ereignisblasen viele Kopfschmerzen verursachen. Wenn sich der Mauszeiger in diesem Beispiel beispielsweise über das innere Element bewegt, wird ein Mouseover-Ereignis an dieses Element gesendet, das dann auf Outer übertragen wird. Dies kann unseren gebundenen Mouseover-Handler zu ungünstigen Zeiten auslösen. In der Diskussion finden Sie .mouseenter()eine nützliche Alternative.

Mouseenter und Mouseleave reagieren nicht auf Ereignisblasen, während Mouseover und Mouseout dies tun .

Hier ist ein Artikel , der das Verhalten beschreibt.

Wie so oft bei Fragen wie diesen hat Quirksmode die beste Antwort .

Ich würde mir vorstellen, dass die Verwendung eines der beiden Ereignisnamen dasselbe Verhalten auslöst, da eines der Ziele von jQuery darin besteht, die Browserunabhängigkeit zu erhöhen. Edit: dank anderer Beiträge sehe ich jetzt, dass dies nicht der Fall ist

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