What is the difference between the mouseover and mouseenter events?

by

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.

More Related Contents:

  1. How to stop default link click behavior with jQuery
  2. How can I get jQuery .val() AFTER keypress event?
  3. jQuery event that triggers after CSS is loaded?
  4. Get the clicked object that triggered jquery blur() event [duplicate]
  5. Drop event not firing in chrome
  6. How do I handle a click anywhere in the page, even when a certain element stops the propagation?
  7. jQuery.click() vs onClick
  8. Check if an image is loaded (no errors) with jQuery
  9. jQuery Event Keypress: Which key was pressed?
  10. Definitive way to trigger keypress events with jQuery
  11. How to order events bound with jQuery
  12. Can I call jQuery’s click() to follow an link if I haven’t bound an event handler to it with bind or click already?
  13. Check if event exists on element [duplicate]
  14. How to detect online/offline event cross-browser?
  15. How to differentiate single click event and double click event?
  16. How to trigger the window resize event in JavaScript?
  17. How to bind Events on Ajax loaded Content?
  18. How to unbind a listener that is calling event.preventDefault() (using jQuery)?
  19. Handling key-press events (F1-F12) using JavaScript and jQuery, cross-browser
  20. jQuery: How to get the event object in an event handler function without passing it as an argument?
  21. Detect Close windows event by jQuery
  22. window.resize event firing in Internet Explorer
  23. jQuery: Unbind event handlers to bind them again later
  24. jQuery change event on not firing in IE
  25. How do you detect the clearing of a “search” HTML5 input?
  26. Performance difference between jQuery’s .live(‘click’, fn) and .click(fn)
  27. Prevent onclick action with jQuery
  28. Disabling middle click scrolling with javascript
  29. jQuery: How to listen for DOM changes?
  30. addEventListener to iFrame

Leave a Comment