Sự khác biệt giữa các sự kiện mouseover và mouseenter là gì?

Tôi đã luôn sử dụng mouseoversự kiện này, nhưng trong khi đọc tài liệu jQuery tôi đã tìm thấy mouseenter. Chúng dường như hoạt động chính xác như nhau.

Có sự khác biệt giữa hai loại này không, và nếu vậy thì khi nào tôi nên sử dụng chúng?
(Cũng áp dụng cho mouseoutvs mouseleave).

Bạn có thể thử ví dụ sau từ trang tài liệu jQuery . Đây là một bản demo tương tác nhỏ, đẹp mắt và rất rõ ràng và bạn có thể tự mình nhìn thấy.

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>

Nói tóm lại, bạn sẽ nhận thấy rằng một sự kiện chuột xảy ra trên một phần tử khi bạn vượt qua nó - đến từ phần tử con HOẶC cha mẹ của nó, nhưng sự kiện nhập chuột chỉ xảy ra khi chuột di chuyển từ bên ngoài phần tử này sang phần tử này.

Hoặc như các mouseover()tài liệu đưa ra:

[ .mouseover()] có thể gây ra nhiều đau đầu do sự kiện sủi bọt. Chẳng hạn, khi con trỏ chuột di chuyển qua phần tử bên trong trong ví dụ này, một sự kiện di chuột sẽ được gửi đến đó, sau đó nhỏ giọt lên bên ngoài. Điều này có thể kích hoạt trình xử lý di chuột bị ràng buộc của chúng tôi tại thời điểm không thuận lợi. Xem các cuộc thảo luận .mouseenter()cho một sự thay thế hữu ích.

Mouseenter và mouseleave không phản ứng với sự kiện sủi bọt, trong khi mouseover và mouseout thì không .

Đây là một bài viết mô tả hành vi.

Như thường đúng với những câu hỏi như thế này, Quirksmode có câu trả lời tốt nhất .

Tôi sẽ tưởng tượng rằng, bởi vì một trong những mục tiêu của jQuery là làm cho mọi thứ trở thành bất khả tri của trình duyệt, rằng việc sử dụng một trong hai tên sự kiện sẽ kích hoạt hành vi tương tự. Chỉnh sửa: nhờ các bài viết khác, bây giờ tôi thấy đây không phải là trường hợp

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