.focusin()S2C Home « Events « .focusin()

Focusin event handler.

Description

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

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

Syntax


Signature Description
.focusin( [eventData], handler(eventObject) )Bind an event handler to the focusin 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.

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


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

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

In the example below we show a new message in the 'p' element with an id of 'scrollspan10' each time the input element with an id of 'input10' gains focus.

When the element gains focus, the focusin JavaScript event fires off the $('#input10').focusin({ param1: '#scrollspan10', param2: 'focusin', 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: '#scrollspan10', param2: 'focusin', 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(){
  $('#input10').focusin({ param1: '#scrollspan1', param2: 'focusin ', 
                          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.

go to home page Homepage go to top of page Top