Are there any differences between the following code snippet?

Snippet 1:

$("textarea").mouseenter(function() {
    alert("Hello mouseenter!");
});

$("textarea").mouseleave(function() {
    alert("Hello mouseleave!");
});

Snippet 2:

$("textarea").hover(function() {
    alert("Hello mouseenter!");
}, function() {
    alert("Hello mouseleave!");
});

I've checked the above code snippet in Chrome and Firefox, but both snippets were behaved identically. However, I wanted to make sure as, Is there any difference between mouseenter-mouseleave and hover events?

Are there any differences between the following code snippet?

Snippet 1:

$("textarea").mouseenter(function() {
    alert("Hello mouseenter!");
});

$("textarea").mouseleave(function() {
    alert("Hello mouseleave!");
});

Snippet 2:

$("textarea").hover(function() {
    alert("Hello mouseenter!");
}, function() {
    alert("Hello mouseleave!");
});

I've checked the above code snippet in Chrome and Firefox, but both snippets were behaved identically. However, I wanted to make sure as, Is there any difference between mouseenter-mouseleave and hover events?

• javascript
• jquery
• difference

5 Answers 5

There is no difference between them... the hover() method registers the mouseenter and mouseleave handlers internally....

hover - code

hover: function( fnOver, fnOut ) {
    return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver );
}

The only difference is if you want make use of event delegation, in that scenario you cann't use .hover()

jQuery docs say:

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

1 $( selector ).mouseenter( handlerIn ).mouseleave( handlerOut );

Hover uses mouseenter and mouseleave.

The different one is mouseover and mouseout. enter/leave are not native events, they're a subset of over/out events.

over/out events also happen if you move from a parent into onto a child; you get a mouseout, and a mouseover when you move back. This is not good for hovers since you want the hover to apply to the element and it's children.

Using the hover function will shoot the event twice and it will act for both mouse in and mouse out, eg

$("#xyz").hover(function (e) {
            alert("In hover function ");
});

This will trigger the alert twice, once when you take your mouse on xyz element and once when you will take your mouse away from xyz. This may cause some trouble in your code, where as in mouseienter mouseleave event you can plan the event accordingly

Hover doesnot fire event for the children whereas mouseenter and mouseleave does.