jQuery focusin() method

The focusin() method is used to bind a function, which executes when an element or any element in it gets focus. An element gets focus when it is selected by a tab-navigation or by mouse click. It is different from the focus() method, as the focusin() method also triggers when child elements of an element get the focus.

The focusin() method is generally used with the focusout() method.

Syntax

This method accepts a single parameter, which is defined as follows -

function: It specifies a function to execute on the occurrence of the focusin event.

Now let's understand the focusin() method using an example.

Example

In this example, we are using the focusin() method to change the style of the div element when it or any of the elements inside it gets focus. Here, there is a div element, including a textfield and a button. When the user clicks inside the textfield or the button, the focusin event triggers, and the background color of the div element will get changed.

If we use the focus() method instead of using the focusin() method, nothing will happen on clicking the elements inside the div element. This is because the focus() method does not trigger when a child element of an element gets focus.

Output

After the execution of the above code, we will get the following output -

After clicking inside the textfield, the output will be -