.focusout() JQ Home  <<  Events  <<  .focusout()

• <<    .focusin()
• .select()     >>

Focusout event handler.

Description

The .focusout() method is used to bind an event handler to The JavaScript focusout event.

• The focusout() event is sent to an element when it, or any descendant, loses focus. This is distinct from the blur event in that it supports a loss of focus event on parent elements, ergo it supports event bubbling.
• The focusout() event is often used in tandem with the .focusin() event.

Syntax

Parameters

Return

A jQuery object.

.focusout( ) Example  Events  <<  Top

Trigger the focusout JavaScript event on the specified element.

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

In the example below we show a new message in the 'div' element with an id of 'div1' every time the radio button for 'beef pie' loses focus.

When the radio button is pushed we trigger off the focusout JavaScript event on the 'div1'. This then fires off the $('#div1').focusout(function(){}) code which outputs the message.

$(function(){
  $('#beef').focusout(function () {
    $('#div1').append('<code>focusout</code> JavaScript event triggered<br>');
  });

  $('#beef').click(function() {
    $('#div1').focusout();
  });
});

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

Bind an event handler to the focusout JavaScript event.

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

In the example below we show a new message in the 'p' element with an id of 'scrollspan1' each time the input element with an id of 'input1' below loses focus.

When the input is typed in, the focusout 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(){
  $('#input1').focusout(addText);

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

We will show a message here.

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

Bind an event handler to the focusout JavaScript event, optionally passing a map of data.

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

In the example below we show a new message in the 'p' element with an id of 'scrollspan2' each time the input element with an id of 'input2' loses focus.

When the element loses focus, the focusout JavaScript event fires off the $('#input2').focusout({ param1: '#scrollspan2', param2: 'focusout 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: 'focusout', 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(){
  $('#input2').focusout({ param1: '#scrollspan2', param2: 'focusout ', 
                          param3: '**JavaScript event triggered**  ' }, addText2);
  function addText2(event) {
    $(event.data.param1).append( event.data.param2 + event.data.param3);
  }
});

We will show a message here.

Related Tutorials

jQuery Advanced Tutorials - Lesson 2 - Keyboard & Mouse Events

• <<    .focusin()
• .select()     >>