В чем разница между событиями mouseover и mouseenter?

Question

Я всегда использовал mouseover событие, но во время чтения документации JQuery я нашел mouseenter, Кажется, они функционируют точно так же.

Есть ли разница между ними, и если да, то когда мне их использовать?
(Также относится к mouseout против mouseleave).

Answer 1

Вы можете попробовать следующий пример со страницы документа 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() ] может вызвать много головных болей из-за пузырей событий. Например, когда указатель мыши перемещается по элементу Inner в этом примере, ему будет отправлено событие mouseover, а затем накапливается до Outer. Это может вызвать наш связанный обработчик при наведении мыши в неподходящее время. Смотрите обсуждение для .mouseenter() за полезную альтернативу.

Answer 2

Mouseenter и mouseleave не реагируют на всплывающие события, в то время как mouseover и mouseout делают.

Вот статья, которая описывает поведение.

Answer 3

Как часто бывает с такими вопросами, Quirksmode имеет лучший ответ.

Я полагаю, что, поскольку одна из целей jQuery - сделать браузер независимым, использование любого имени события вызовет одинаковое поведение. Редактировать: благодаря другим сообщениям, теперь я вижу, что это не тот случай

Answer 4

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

Answer 5

Только Chrome позволяет предлагать имя для использования при нажатии на ссылку с динамически генерируемым контентом. Однако вы можете сгенерировать контент, когда курсор мыши находится над ссылкой, и поместить его как DATAURI в стандартную статическую ссылку. Это активирует опцию "Сохранить ссылку как..." в контекстном меню.

function download_content(a, side) 
{
    a.innerHTML = "preparing content..";

    var txt = "call a function to generate content";
    var datauri = "data:plain/text;charset=UTF-8," + encodeURIComponent(txt);
    a.setAttribute('download', "chrome_let_you_suggest_a_name.txt");
    a.setAttribute('href', datauri);

    a.innerHTML = "content ready.";
}
document.getElementById('my_a_link').addEventListener('mouseover', function() { download_content(this); });

<a id="my_a_link" href="#">save document</a>

Answer 6

Объясняет это довольно хорошо здесь