JavaScript focusout event

The focusout event of JavaScript is the event handler that executes when the element is just about to lose focus. Other than this, we have also learned about blur, which is also an event handler used in JavaScript. Both blur and focusout are the focus events, but there is a difference between both of them. The difference is that the blur event does not bubble, whereas the focusout event bubbles out. Thus, when the user finds that an element or its child is about to lose focus, the user should listen to the onfocusevent of that element.

Thus if the user performs the following actions, the focusout event will be invoked:

1. When the user clicks outside the active element, the focus is lost.
2. Switching to another application or file.
3. Use TAB key/access key to navigate away from the active element, and so the focus is lost.
4. Calling the blur method on an active element.
5. Calling the setActive method on a non-active element that can be active.
6. Calling the focus method on a non-active element that can be active.

Note: The focusin event is just the opposite of the focusout event, where the event action is performed when the user creates a focus on the active element. For focusin, we use onFocusIn event handler.

Example of focusout event

Let's look and understand both the focusin and focusout events with the help of the below example:

Code Explanation

1. The above code is the html and JavaScript based code.
2. In the body section of the html, we have created a form having a user and a password field.
3. In the script section of the JavaScript, we have created two functions where Focus_In is for focusin event and Focus_Out is for focusout event.
4. While creating the form, we have invoked both the Focus_In and Focus_Out functions.
5. Two actions will be performed-When the user clicks on any of the textbox, the color of the text changes to red which means that focus is in. So, the Focus_In function is called. Another action takes place when the user clicks anywhere on the page but not on the active part (i.e. on the text of the textbox or on the password in the textbox) which means the focus is lost and thus the color changes back to blue. So, the Focus_Out function is invoked in this case.
6. Also note that when the user executes the code on the web browser, the color of the text is seen black unless the user does not makes any action.

The output of the above code is shown below: