.mouseout()S2C Home « Events « .mouseout()

Mouseout event handler.

Description

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

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

Syntax


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

Parameters


Parameter Description Type
eventDataAn 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.

.mouseout( ) Examplego to top of page Top

Trigger the mouseout JavaScript event on the specified element.

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

In the example below we show a new message in the 'div' element with an id of 'div12' every time the mouse leaves the division. Notice how the event also fires when the mouse leaves the image element, as described in the description above.

When the mouse leaves the division or image, we trigger off the mouseout JavaScript event on the 'div12'. This then fires off the $('#div12').mouseout(function(){}) code which outputs the message.

a picture of curry




$(function(){
  $('#div12').mouseout(function () {
    $('#div12').append('<code>mouseout</code> JavaScript event triggered.<br />');
  });
  $('#div12').mouseout();
});

.mouseout( [eventData], handler(eventObject) ) Examplego to top of page Top


  • This signature is a shortcut for .bind('mouseout', handler).

Bind an event handler to the mouseout 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 'scrollspan6' each time the 'div' element with an id of 'div13' below is left.

When the mouse button leaves the division, the mouseout JavaScript event fires off the $('#div13').mouseout({ param1: '#scrollspan6', param2: 'mouseout', 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: '#scrollspan6', param2: 'mouseout', 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(){
  $('#div13').mouseout({ param1: '#scrollspan6', param2: 'mouseout ', 
                         param3: '**JavaScript event triggered**  ' }, addText2);
  function addText2(event) {
    $(event.data.param1).append(event.data.param2 + ''<code>' + event.data.param3+ ''</code>');
  }
});

a picture of curry



We will show a message here.

go to home page Homepage go to top of page Top