.mouseenter()S2C Home « Events « .mouseenter()
Mouseenter event handler.
Description
The .mouseenter()
method is used to bind an event handler to the JavaScript mouseenter
event or trigger that event on the specified element.
- The
mouseenter
event is sent to an element when the mouse pointer is moved over the element it is bound to. - The
mouseenter
event is similar to themouseover
event but the events differ in the way they handle event bubbling:- The
mouseenter
event only triggers its handler when the mouse pointer enters the element it is bound to, not any descendants. - The
mouseover
event triggers its handler when the mouse pointer enters the element it is bound to, as well as any descendants.
- The
Syntax
Signature | Description |
---|---|
.mouseenter( ) | Trigger the mouseenter JavaScript event on the specified element. |
.mouseenter( [eventData], handler(eventObject)) | Bind an event handler to the mouseenter JavaScript event, optionally passing an object of data. |
Parameters
Parameter | Description | Type |
---|---|---|
eventData | An object of data to pass to the event handler. | Object |
handler( eventObject ) | A function to execute each time the event is triggered. | Function |
Return
A jQuery
object.
.mouseenter( )
Example
Top
Trigger the mouseenter
JavaScript event on the specified element.
- This signature is a shortcut for
.trigger('mouseenter')
.
In the example below we show a new message in the 'div' element with an id of 'div5' every time the mouse enters the division. Notice how the event doesn't fire when the mouse enters the image element, as described in the description above.
When the mouse enters the division we trigger off the mouseenter
JavaScript event on the 'div5'. This then fires off the $('#div5').mouseenter(function(){})
code which outputs the message.

$(function(){
$('#div5').mouseenter(function () {
$('#div5').append('<code>mouseenter</code> JavaScript event triggered.<br />');
});
$('#div5').mouseenter();
});
.mouseenter( [eventData], handler(eventObject) )
Example
Top
- This signature is a shortcut for
.bind('mouseenter', handler)
.
Bind an event handler to the mouseenter
JavaScript event, optionally passing an object of data.
In the example below we show a new message in the 'p' element with an id of 'scrollspan3' each time the 'div' element with an id of 'div7' below is entered.
When the mouse button enters the division, the mouseenter
JavaScript event fires off the $('#div7').mouseenter({ param1: '#scrollspan3', param2: 'mouseenter', param3: '**JavaScript event triggered** ' }, addText2);
code.
What we are doing here is passing across the event
object to the function addText2(event)
. The map we specify, in our case { param1: '#scrollspan3', param2: 'mouseenter', param3: '**JavaScript event triggered** ' }
gets tagged onto the event.data
property. We then access this parameter in the function via event.data.param
and use it as part of the appended data.
$(function(){
$('#div7').mouseenter({ param1: '#scrollspan3', param2: 'mouseenter ',
param3: '**JavaScript event triggered** ' }, addText2);
function addText2(event) {
$(event.data.param1).append(event.data.param2 + ''<code>' + event.data.param3+ ''</code>');
}
});

We will show a message here.
Related Tutorials
jQuery Advanced Tutorials - Lesson 2 - Keyboard & Mouse Events