Different between mouseover() and mouseenter() in jQuery
In jQuery, both mouseover() and mouseenter() events are fire when the mouse enters the matched element. The only different is in the way of the “event bubbling” handle in child element, let’s see two scenarios :
1. NO child element
If the matched elements have no child element, both mouseover() and mouseenter() events are work exactly same. See try it yourself below.
2. WITH child element inside
If the matched elements have child element, both mouseover() and mouseenter() events are work different in the way of “event bubbling” :
For example, a “outerBox” contains a child element “innerBox”.
<div id="outerBox">OuterBox
<div id="innerBox">InnerBox
</div>
</div>
P.S Assure both outerBox and innerBox are attached to certain events.
mouseover()
- When mouse enters the “outerBox”, fire the “outerBox” event.
- When mouse enters the “innerBox”, fire the “innerBox” event, follow by the “outerBox” event.
- When mouse enters back to the “outerBox”, fire the “outerBox” event.
mouseenter()
- When mouse enters the “outerBox”, fire the “outerBox” event.
- When mouse enters the “innerBox”, fire the “innerBox” event.
- When mouse enters back to the “outerBox”, no event will fire.
Ya, it’s quite confusing and understand in “words”, let understand it by playing the below example :
Try it yourself
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<style type="text/css">
#mouseover-outerBox1, #mouseenter-outerBox1,
#mouseover-outerBox2, #mouseenter-outerBox2{
margin:8px;
border:1px groove #999966;
background-color : #999966;
width:150px;
height:150px;
color:white;
}
#mouseover-innerBox2, #mouseenter-innerBox2{
margin:8px 8px 8px 16px;
border:1px groove #0000FF;
background-color : #0000FF;
width:100px;
height:100px;
color:white;
}
span{
padding:8px;
}
.content{
width:500px;
height:250px;
}
.container1{
float:left;
padding-right:16px;
}
</style>
</head>
<body>
<h1>jQuery mouseover() vs mouseenter() example</h1>
<div class="content">
<div class="container1">
<span>mouseover() - no child element</span>
<div id="mouseover-outerBox1">OuterBox
</div>
<span id="mouseover-msg1">#mouseover is fired : 0</span>
</div>
<div class="container1">
<span>mouseenter() - no child element</span>
<div id="mouseenter-outerBox1">OuterBox
</div>
<span id="mouseenter-msg1">#mouseenter is fired : 0</span>
</div>
</div>
<div class="content">
<div class="container1">
<span>mouseover() - with child elements</span>
<div id="mouseover-outerBox2">OuterBox
<div id="mouseover-innerBox2">InnerBox
</div>
</div>
<span id="mouseover-outer-msg2">#mouseover outer is fired : 0</span>
<br/>
<span id="mouseover-inner-msg2">#mouseover inner is fired : 0</span>
</div>
<div class="container1">
<span>mouseenter() - with child elements</span>
<div id="mouseenter-outerBox2">OuterBox
<div id="mouseenter-innerBox2">InnerBox
</div>
</div>
<span id="mouseenter-outer-msg2">#mouseenter outer is fired : 0</span>
<br/>
<span id="mouseenter-inner-msg2">#mouseenter inner is fired : 0</span>
</div>
</div>
<script type="text/javascript">
//example 1
var mouseover1=1;
$('#mouseover-outerBox1').mouseover(function(event) {
$('#mouseover-msg1').text('#mouseover is fired : ' + mouseover1++)
});
var mouseenter1=1;
$('#mouseenter-outerBox1').mouseenter(function(event) {
$('#mouseenter-msg1').text('#mouseenter is fired : ' + mouseenter1++)
});
//example 2
var mouseoverouter2=1;
$('#mouseover-outerBox2').mouseover(function(event) {
$('#mouseover-outer-msg2')
.text('#mouseover outer is fired : ' + mouseoverouter2++)
});
var mouseoverinner2=1;
$('#mouseover-innerBox2').mouseover(function(event) {
$('#mouseover-inner-msg2')
.text('#mouseover inner is fired : ' + mouseoverinner2++)
});
var mouseenterouter2=1;
$('#mouseenter-outerBox2').mouseenter(function(event) {
$('#mouseenter-outer-msg2')
.text('#mouseenter outer is fired : ' + mouseenterouter2++)
});
var mouseenterinner2=1;
$('#mouseenter-innerBox2').mouseenter(function(event) {
$('#mouseenter-inner-msg2')
.text('#mouseenter inner is fired : ' + mouseenterinner2++)
});
</script>
</body>
</html>
About Author
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter. If you like my tutorials, consider make a donation to these charities.
thanks broo ..
Thanks for share….
Thanks Good
nice article! its really help me! thanks a lot
i already find in google how to manage element to be a good , but not yet to find it
I like this website very much so much fantastic information.
I’ve tried it and it does not come out, is there any video?
This kind of HTML edit was a bit difficult for me actually, but thanks.
Writing that the difference between mouseover and mouseenter is the event bubbling is not exact. Event bubbling is a consequence of event propagation. You do not talk at all about event propagation in your article, but it’s the exact name of this behavior
Writing that the difference between mouseover and mouseenter is the event bubbling is not exact. Event bubbling is a consequence of event propagation. You do not talk at all about event propagation in your article, but it’s the exact name of this behavior. Event bubbling is not the behavior, but a special case that occur when events are triggered on nested
Writing that the difference between mouseover and mouseenter is the event bubbling is not exact. Event bubbling is a consequence of event propagation.
You do not talk at all about event propagation in your article, but it’s the exact name of this behavior. Event bubbling is not the behavior, but a special case that occur when events are triggered on nested elements and generates weird behaviors because of event propagation.
It could be just a matter of vocabulary, but your article is not properly indexed by Google because of this confusion.
In a couple of words:
– mouseover: event propagation
– mouseenter: no event propagation
BTW your post and examples are very interesting and helped me to fix my problem with mouseenter. Actually I needed event propagation and do not understand why it does not occur using mouseenter! 🙂
Thanks!
You should learn to read, write, and speak English at least to a grade school level before posting articles in this language. As Abraham Lincoln once quipped, it is better to remain silent and be thought a thumb-sucking idiot than to open one’s mouth and remove all doubt. As it is, you appear illiterate.
Seriously? Number one, you’re being an asshole. Number two, this is a programming blog, not some academic journal or news website. I came here because I wanted to understand exactly how mouseenter and mouseover events work. With the English this guy knows, he showed me exactly that. Sure his sentence structure sucks, but that doesn’t disqualify the technical merits of the post. The majority of this is code anyway.
Nivram, there is NO need to make fun of people’s ability to write/speak. If YOU have nothing nice to say, don’t say anything at all. You might as well suggest the “correct” way of HOW someone should speak and write.
“As Abraham Lincoln once quipped, it is better to remain silent and be thought a thumb-sucking idiot than to open one’s mouth and remove all doubt.” As it is, you are an internet bully. Shame on you.
tips :
$(‘#mouseover-innerBox2’).mouseover(function(event) {
event.stopPropagation(); //dont fired on my parent
$(‘#mouseover-inner-msg2’)
.text(‘#mouseover inner is fired : ‘ + mouseoverinner2++)
});