Fareyle üzerine gelme ve mouseenter etkinlikleri arasındaki fark nedir?

Ben her zaman mouseoverolayı kullandım , ama buldum jQuery belgeleri okurken mouseenter. Aynı şekilde işlev görüyorlar.

İkisi arasında bir fark var mı, varsa ne zaman kullanmalıyım?
( mouseoutVs için de geçerlidir mouseleave).

JQuery doc sayfasından aşağıdaki örneği deneyebilirsiniz . Çok açık hale getiren hoş, küçük, etkileşimli bir demo ve aslında kendiniz görebilirsiniz.

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>

Kısacası, bir öğenin üzerindeyken (alt öğesinden VEYA üst öğesinden) gelen bir fare üzerinden üzerine gelme olayının oluştuğunu fark edersiniz, ancak bir fare enter olayı yalnızca fare bu öğenin dışından bu öğeye hareket ettiğinde gerçekleşir.

Veya olarak mouseover()dokümanlar koydu:

[ .mouseover()] olay köpürmesi nedeniyle birçok baş ağrısına neden olabilir. Örneğin, fare imleci bu örnekte İç öğenin üzerine geldiğinde, bunun üzerine bir fareyle üzerine gelme olayı gönderilir, ardından Dış'a kadar damlar. Bu, bağlı fareyle işleme işleyicimizi uygunsuz zamanlarda tetikleyebilir. .mouseenter()Yararlı bir alternatif için tartışmaya bakın .

MouseEnter ve mouseLeave yok olay köpüren tepki, fare üzerinde iken ve mouseout yapmak .

Davranışı açıklayan bir makale .

Bu tür sorularla çoğu zaman doğru olduğu gibi, Quirksmode en iyi cevaba sahiptir .

Ben, çünkü jQuery hedeflerinden biri tarayıcı agnostic şeyler yapmak olduğunu, her iki olay adı kullanarak aynı davranışı tetikleyecek olduğunu hayal ediyorum. Düzenleme: diğer yayınlar sayesinde, şimdi durum böyle değil

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