Jquery mouseenter() vs mouseover()

Question

So after reading a recently answered question i am unclear if i really understand the difference between the mouseenter() and mouseover(). The post

Answer 1

See the example code and demo at the bottom of the jquery documentation page:

http://api.jquery.com/mouseenter/

... mouseover fires when the pointer moves into the child element as well, while mouseenter fires only when the pointer moves into the bound element.

Answer 2

This example demonstrates the difference between the mousemove, mouseenter and mouseover events:

https://jsfiddle.net/z8g613yd/

HTML:

<div onmousemove="myMoveFunction()">
    <p>onmousemove: <br> <span id="demo">Mouse over me!</span></p>
</div>

<div onmouseenter="myEnterFunction()">
    <p>onmouseenter: <br> <span id="demo2">Mouse over me!</span></p>
</div>

<div onmouseover="myOverFunction()">
    <p>onmouseover: <br> <span id="demo3">Mouse over me!</span></p>
</div>

CSS:

div {
    width: 200px;
    height: 100px;
    border: 1px solid black;
    margin: 10px;
    float: left;
    padding: 30px;
    text-align: center;
    background-color: lightgray;
}

p {
    background-color: white;
    height: 50px;
}

p span {
    background-color: #86fcd4;
    padding: 0 20px;
}

JS:

var x = 0;
var y = 0;
var z = 0;

function myMoveFunction() {
    document.getElementById("demo").innerHTML = z += 1;
}

function myEnterFunction() {
    document.getElementById("demo2").innerHTML = x += 1;
}

function myOverFunction() {
    document.getElementById("demo3").innerHTML = y += 1;
}

• onmousemove : occurs every time the mouse pointer is moved over the div element.
• onmouseenter : only occurs when the mouse pointer enters the div element.
• onmouseover : occurs when the mouse pointer enters the div element, and its child elements (p and span).

Answer 3

You see the behavior when your target element contains child elements:

http://jsfiddle.net/ZCWvJ/7/

Each time your mouse enters or leaves a child element, mouseover is triggered, but not mouseenter.

$('#my_div').bind("mouseover mouseenter", function(e) {
  var el = $("#" + e.type);
  var n = +el.text();
  el.text(++n);
});

#my_div {
  padding: 0 20px 20px 0;
  background-color: #eee;
  margin-bottom: 10px;
  width: 90px;
  overflow: hidden;
}

#my_div>div {
  float: left;
  margin: 20px 0 0 20px;
  height: 25px;
  width: 25px;
  background-color: #aaa;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<div>MouseEnter: <span id="mouseenter">0</span></div>
<div>MouseOver: <span id="mouseover">0</span></div>

<div id="my_div">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Answer 4

Old question, but still no good up-to-date answer with insight imo.

These days, all browsers support mouseover/mouseout and mouseenter/mouseleave. Nevertheless, jQuery does not register your handler to mouseenter/mouseleave, but silently puts them on a wrappers around mouseover/mouseout as the following code shows and makes its own slightly different interpretation of mouseenter/mouseleave.

The exact behavior of events is especially relevant on “delegate handlers”. Unfortunately, jQuery also has its own different interpretation of what delegate handlers are and what they should receive for events. That fact is shown in another answer for the simpler click event.

So how to properly answer a question about jQuery, which uses Javascript wording for events and handlers, but makes both different and does not even mention that in its documentation?

First the differences in “real” Javascript:

• both
  • the mouse can “jump” from outside/outer elements to inner/innermost elements when moved faster than the browser samples its position
  • any enter/over gets a corresponding leave/out (possibly late/jumpy)
  • events go to the visible element below the pointer (invisible → can’t be target)
• mouseenter/mouseleave
  • is delivered to the element where registered (target)
  • whenever the element or any descendant (e.g. by jumping) is entered/left
  • it can’t bubble, because conceptually the descendants are considered part of the element in question, i.e. there are no children where another event could come from (with the meaning of “entered/left” the parent?!)
  • children might also have similar handlers registered, which enter/leave correctly, but unrelated to the parental enter/leave cycle
• mouseover/mouseout
  • the target is the actual element below the pointer
    • a target can’t be two things: i.e. not parent and child at the same time
  • the event can’t “nest”
    • before a child could be “overed”, the parent needs to get “out”
  • can bubble, because target/relatedTarget indicate where the event occurred

After some testing, it shows that as long as you don’t use jQuery “delegate handlers with selector registration”, the emulation is unnecessary but reasonable: It filters out mouseover/mouseout events that a mouseenter/mouseleave would not get. The target is messed, though. The real mouseenter/mouseleave would give the handler element as target, the emulation might indicate children of that element, i.e. whatever the mouseover/mouseout carried.

const list = document.getElementById('log');
const outer = document.getElementById('outer');
const $outer = $(outer);

function log(tag, event) {
  const li = list.insertBefore(document.createElement('li'), list.firstChild);
  // only jQuery handlers have originalEvent
  const e = event.originalEvent || event;
  li.append(`${tag} got ${e.type} on ${e.target.id}`);
}

outer.addEventListener('mouseenter', log.bind(null, 'JSmouseenter'));
$outer.on('mouseenter', log.bind(null, '$mouseenter'));

div {
  margin: 20px;
  border: solid black 2px;
}

#inner {
  min-height: 80px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div id=outer>
    <ul id=log>
    </ul>
  </div>
</body>

Answer 5

Though they operate the same way, however, the mouseenter event only triggers when the mouse pointer enters the selected element. The mouseover event is triggered if a mouse pointer enters any child elements as well.

Answer 6

This is one of the best examples I have found of:

• mouseenter
• mouseover
• mouseout
• mouseleave

http://bl.ocks.org/mbostock/5247027