Apa perbedaan antara peristiwa mouseover dan mouseenter?

Saya selalu menggunakan mouseoveracara tersebut, tetapi ketika membaca dokumentasi jQuery yang saya temukan mouseenter. Mereka tampaknya berfungsi persis sama.

Apakah ada perbedaan antara keduanya, dan jika demikian kapan saya harus menggunakannya?
(Juga berlaku untuk mouseoutvs mouseleave).

Anda dapat mencoba contoh berikut dari halaman doc jQuery . Ini adalah demo interaktif kecil yang menyenangkan yang membuatnya sangat jelas dan Anda benar-benar dapat melihatnya sendiri.

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>

Singkatnya, Anda akan melihat bahwa peristiwa mouse over terjadi pada suatu elemen ketika Anda mengatasinya - yang berasal dari elemen anaknya ATAU elemen induknya, tetapi peristiwa enter mouse hanya terjadi ketika mouse bergerak dari luar elemen ini ke elemen ini.

Atau seperti yang mouseover()tertulis dalam dokumen :

[ .mouseover()] dapat menyebabkan banyak sakit kepala karena peristiwa menggelegak. Misalnya, ketika penunjuk tetikus bergerak di atas elemen dalam dalam contoh ini, peristiwa mouseover akan dikirim ke sana, kemudian mengalir ke luar. Ini dapat memicu handler mouseover handler kami pada waktu yang tidak tepat. Lihat diskusi untuk .mouseenter()alternatif yang bermanfaat.

Mouseenter dan mouseleave tidak bereaksi terhadap peristiwa menggelegak, sedangkan mouseover dan mouseout lakukan .

Inilah artikel yang menjelaskan perilaku tersebut.

Seperti yang sering terjadi pada pertanyaan-pertanyaan seperti ini, Quirksmode memiliki jawaban terbaik .

Saya akan membayangkan hal itu, karena salah satu tujuan jQuery adalah membuat browser menjadi agnostik, bahwa menggunakan salah satu nama acara akan memicu perilaku yang sama. Sunting: terima kasih untuk posting lain, sekarang saya melihat ini tidak terjadi

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