Вы можете попробовать следующий пример со страницы документации 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()
полезной альтернативы.
mouseenter
«происходит только тогда, когда мышь перемещается от родительского элемента к элементу». Событие происходит, когда мышь переходит от внешнего элемента к внутреннему. Неважно, из какого элемента пришла мышь. Это правда, что мышь часто приходит от родителя, но не всегда. Например, если родитель не имеет отступов или границ, тогда мышь может войти прямо от деда иmouseenter
все равно будет стрелять. Фактически, он может даже ввести элемент снаружи области просмотра (если элемент находится прямо на краю), и событие все еще срабатывает.Mouseenter и mouseleave не реагируют на всплывающие события, в то время как mouseover и mouseout делают .
Вот статья, которая описывает поведение.
источник
Как часто бывает с такими вопросами, Quirksmode имеет лучший ответ .
Я полагаю, что, поскольку одна из целей jQuery - сделать браузер независимым, использование любого имени события вызовет одинаковое поведение.Редактировать: благодаря другим сообщениям, теперь я вижу, что это не тот случайисточник
источник