Differencebetween the Mouseover and Mouseenter Events

What is the difference between the mouseover and mouseenter events?

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>

Jquery mouseenter() vs mouseover()

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>

When to choose mouseover() and hover() function?

From the official jQuery documentation

• .mouseover()
  Bind an event handler to the "mouseover" JavaScript event, or trigger
  that event on an element.

---

• .hover() Bind one or two handlers
  to the matched elements, to be executed when the mouse pointer
  enters and leaves the elements.

  Calling $(selector).hover(handlerIn, handlerOut) is shorthand for:
  $(selector).mouseenter(handlerIn).mouseleave(handlerOut);

---

• .mouseenter()

  Bind an event handler to be fired when the mouse enters an element,
  or trigger that handler on an element.

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

---

What this means

Because of this, .mouseover() is not the same as .hover(), for the same reason .mouseover() is not the same as .mouseenter().

$('selector').mouseover(over_function) // may fire multiple times

// enter and exit functions only called once per element per entry and exit
$('selector').hover(enter_function, exit_function) 

What is the difference between mouseenter and mousehover?

Assuming you are in Windows Forms:

Mouse Enter occurs:

Occurs when the mouse pointer enters the control.

(MSDN)

Mouse Hover:

Occurs when the mouse pointer rests on the control.

A typical use of MouseHover is to display a tool tip when the mouse
pauses on a control within a specified area around the control (the
"hover rectangle"). The pause required for this event to be raised is
specified in milliseconds by the MouseHoverTime property.

(MSDN)

To set MouseHoverTime globally (not recommended, see @IronMan84's link here for a better solution), you can use the SystemParametersInfo function. Because thats a Win32 API call, you'll need PInvoke:

[DllImport("user32.dll", SetLastError = true)]
[return: MarshalAs(UnmanagedType.Bool)]
static extern bool SystemParametersInfo(SPI uiAction, uint uiParam, IntPtr pvParam, SPIF fWinIni);

Called as:

SystemParametersInfo(SPI.SPI_SETMOUSEHOVERTIME, 
                     desiredHoverTimeInMs, 
                     null, 
                     SPIF.SPIF_SENDCHANGE );

Sigantures from PInvoke.NET: SystemParametersInfo, SPIF (Enum), SPI (Enum)

I didn't include the Enum signatures here because they are so freaking long. Just use the ones on PInvoke.Net (linked above)

For complete information on the SystemParametersInfo API call and its parameters, see MSDN.

Difference between onMouseOver and onMouseEnter

Both onmouseenter and onmouseover fire when the mouse enters the boundary of an element. However, onmouseenter doesn't fire again (does not bubble) if the mouse enters a child element within this first element.

Can mouseenter and click event exist together?

The mouseenter event fires when the mouse enters the control. The click event fires when the mouse is clicked. They are two separate events which call two separate event handlers. If you click just as the mouse enters the element they will be called within a short timespan of one another but they are still two distinct events.

It is also important that you differentiate between the mouseenter and the mouseover events. mouseenter fires when the mouse physically enters an element, whereas mouseover fires continually while the mouse remains over an element.

While you cannot trigger the click event per se, you can call the same function that is called by the click event handler. For example if you have this:

var myfunc = function (e) { ... }
document.getElementById("id").onclick = myfunc;

Then you could simply call myfunc directly and you would get the same result as if the mouse was clicked.

---

Related Topics