Яка різниця між подіями миші та мишею?

Я завжди використовував 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);})
 });