อะไรคือความแตกต่างระหว่างเหตุการณ์ที่เกิดกับเมาส์โอเวอร์และเมาส์เซ็นเตอร์?

ฉันได้ใช้เสมอmouseoverเหตุการณ์ แต่ในขณะที่อ่านเอกสาร jQuery mouseenterผมพบว่า ดูเหมือนว่าพวกเขาจะทำงานเหมือนกันทุกประการ

มีความแตกต่างระหว่างทั้งสองหรือไม่และถ้าเป็นเช่นนั้นฉันควรใช้มันเมื่อใด
(ยังใช้กับmouseoutvs mouseleave)

คุณสามารถลองตัวอย่างต่อไปนี้ได้จากหน้าเอกสาร jQuery มันเป็นการสาธิตเชิงโต้ตอบเล็กน้อยที่ทำให้ชัดเจนและคุณสามารถเห็นด้วยตัวคุณเอง

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>

ในระยะสั้นคุณจะสังเกตเห็นว่าการวางเมาส์เหนือเหตุการณ์เกิดขึ้นในองค์ประกอบเมื่อคุณอยู่เหนือองค์ประกอบนั้นมาจากองค์ประกอบย่อยหรือองค์ประกอบหลัก แต่เมาส์เข้าสู่เหตุการณ์จะเกิดขึ้นเมื่อเมาส์เคลื่อนย้ายจากนอกองค์ประกอบนี้ไปยังองค์ประกอบนี้

หรือตามที่mouseover()เอกสารวางไว้:

[ .mouseover()] สามารถทำให้เกิดอาการปวดหัวจำนวนมากเนื่องจากเหตุการณ์เดือด ตัวอย่างเช่นเมื่อตัวชี้เมาส์เลื่อนไปที่องค์ประกอบด้านในในตัวอย่างนี้เหตุการณ์การวางเมาส์จะถูกส่งไปยังสิ่งนั้นจากนั้นไหลไปสู่ด้านนอก สิ่งนี้สามารถทริกเกอร์ตัวจัดการการวางเมาส์ที่ถูกผูกไว้ของเราในเวลาที่ไม่เหมาะสม ดูการอภิปรายสำหรับ.mouseenter()ทางเลือกที่มีประโยชน์

Mouseenter และ MouseLeave ไม่ตอบสนองต่อเหตุการณ์เดือดในขณะที่การวางเมาส์และ mouseout ทำ

นี่คือบทความที่อธิบายพฤติกรรม

มักจะเป็นจริงกับคำถามเช่นนี้ quirksmode มีคำตอบที่ดีที่สุด

ฉันคิดว่าเพราะหนึ่งในเป้าหมายของ jQuery คือการทำให้สิ่งต่าง ๆ ไม่เชื่อเรื่องเบราว์เซอร์การใช้ชื่อเหตุการณ์ใดเหตุการณ์หนึ่งจะทำให้เกิดพฤติกรรมแบบเดียวกัน แก้ไข: ขอบคุณโพสต์อื่น ๆ ตอนนี้ฉันเห็นว่านี่ไม่ใช่กรณี

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