The focus() method triggers the focus event, or specifies a function to run when a focus event occurs. The focusin event is similar to the focus event, but unlike the focus() method, the focusin() method triggers if any child element gets focus. The same is true with the focusout() method.
Syntax
Focus Example
In the following jQuery example, when a user clicks on an input element or uses the tab key, the currently selected input element will trigger the focus() method. In the example below, when this event is triggered, a different CSS set of properties are applied to the element that has the focus event attached. When the user clicks on a different input element, the focusout() method is triggered.
Focusin and Focusout Example
In the following jQuery example, when a user clicks on a child element of the parent element, the focusin event that is attached to the parent is executed. In the example below, the focusin() method triggers and executes a function to modify the CSS background-color property of the parent element.
