I have always used the mouseover event, but while reading the jQuery documentation I found mouseenter. They seem to function exactly the same.
Is there a difference between the two, and if so when should I use them?
(Also applies for mouseout vs mouseleave).
You can try out the following example from the jQuery doc page. It's a nice little, interactive demo that makes it very clear and you can actually see for yourself.
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>In short, you'll notice that a mouse over event occurs on an element when you are over it - coming from either its child OR parent element, but a mouse enter event only occurs when the mouse moves from outside this element to this element.
Or as the mouseover() docs put it:
[
.mouseover()] can cause many headaches due to event bubbling. For instance, when the mouse pointer moves over the Inner element in this example, a mouseover event will be sent to that, then trickle up to Outer. This can trigger our bound mouseover handler at inopportune times. See the discussion for.mouseenter()for a useful alternative.
