What is the difference between the mouseover and mouseenter events?

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).

Answers:

Answer

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.

Answer

Mouseenter and mouseleave do not react to event bubbling, while mouseover and mouseout do.

Here's an article that describes the behavior.

Answer

As is often true with questions like these, Quirksmode has the best answer.

I would imagine that, because one of jQuery's goals is to make things browser agnostic, that using either event name will trigger the same behavior. Edit: thanks to other posts, I now see this is not the case

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.