.mouseleave() JQ Home  <<  Events  <<  .mouseleave()

Mouseleave event handler.

Description

The .mouseleave() method is used to bind an event handler to The JavaScript mouseleave event or trigger that event on the specified element.

  • The mouseleave event is sent to an element when the mouse pointer leaves the element it is bound to.
  • The mouseleave event is similar to the mouseoout event but the events differ in the way they handle event bubbling:
    • The mouseleave event only triggers its handler when the mouse pointer leaves the element it is bound to, not any descendants.
    • The mouseout event triggers its handler when the mouse pointer leaves the element it is bound to, as well as any descendants.

Syntax

Signature Description
.mouseleave( )Trigger the mouseleave JavaScript event on the specified element.
.mouseleave( handler(eventObject) )Bind an event handler to the mouseleave JavaScript event.
.mouseleave( [eventData ,] handler(eventObject) )Bind an event handler to the mouseleave JavaScript event, optionally passing an object of data.

Parameters

Parameter Description Type
handler( eventObject )A function to execute each time the event is triggered.Function
eventDataAn object of data to pass to the event handler.Anything

Return

A jQuery object.

.mouseleave( ) Example  Events  <<  Top

Trigger the mouseleave JavaScript event on the specified element.

  • This signature is a shortcut for .trigger('mouseleave').

In the example below we show a new message in the 'div' element with an id of 'div1' every time the mouse leaves the division. Notice how the event doesn't fire when the mouse leaves the image element, as the mouseenter event only triggers its handler when the mouse pointer enters the element it is bound to, not any descendants

When the mouse leaves the division we trigger othe $('#div1').mouseleave(function(){}) code which outputs the message.



$(function(){
  $('#div1').mouseleave(function () {
    $('#div1').append( '<br><code>mouseleave</code> JavaScript event triggered.');
  });
});
a picture of curry

.mouseleave( handler(eventObject) ) Example  Events  <<  Top

Bind an event handler to the mouseleave JavaScript event.

  • This signature is a shortcut for .on('mouseleave', handler).

In the example below we show a new message in the 'p' element with an id of 'scrollspan1' each time the 'div' element with an id of 'div2' below is entered with the mouse and left.

When mouse leaves the division, the mouseleave JavaScript event fires off the addText(event) mothod which outputs a message.

What we are doing here is passing across the event object to the function addText(event)method. The data we specify gets tagged onto the event.data property.



$(function(){
  $('#div2').mouseleave(addText);

  function addText(event) {
    $('#scrollspan1').append('mouseleave 1 **JavaScript event triggered**<br>');
  }
});



a picture of curry

We will show a message here.

.mouseleave( [eventData ,] handler(eventObject) ) Example  Events  <<  Top

Bind an event handler to the mouseleave JavaScript event, optionally passing an object of data.

  • This signature is a shortcut for .on('mouseleave', handler).

In the example below we show a new message in the 'p' element with an id of 'scrollspan2' each time the 'div' element with an id of 'div11' below is left with the mouse.

When the mouse button leaves the division, the mouseleave JavaScript event fires off the $('#div1').mouseleave({ param1: '#scrollspan2', param2: 'mouseleave 2 ', 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: '#scrollspan2', param2: 'mouseleave 2 ', 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(){
  $('#div3').mouseleave({ param1: '#scrollspan2', param2: 'mouseleave 2 ', 
                         param3: '**JavaScript event triggered**  ' }, addText2);

  function addText2(event) {
    $(event.data.param1).append( event.data.param2 + event.data.param3);
  }
});



a picture of curry

We will show a message here.


Related Tutorials

jQuery Advanced Tutorials - Lesson 2 - Keyboard & Mouse Events