---
title: Focus, Focusin, and Focusout events
author: Jaydon Butzman
description: An intro to focus, focusin and focusout events in JavaScript
published: 2025-1-22
---
# Understanding Focus, Focusin, and Focusout
## Background
The focus, focusin, and focusout events are used to tell when an element loses or gains focus. They help manage user interactions.
### Focus Event
This is triggered when the element gains focus. The event does not "bubble", which means it does not go up the DOM tree.
### Focusin
This is similar to the focus event, but it does "bubble" this time. It is helpful for when we handle focus events/changes at a higher level up in the DOM tree.
### Focusout
This is triggered when an element loces focus, like focusin, it does "bubble"
### Why do we use this?
Using these 3 elements allows devs. to provide feedback to the users, validate the inputs they are doing, and trigger an action when an element gains/loses focus. It will help with user experience by making the input/interaction more responsive to the user.
## Resources
This is what I found while researching the focus, focusin, and focusout events:
1. https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event
2. https://developer.mozilla.org/en-US/docs/Web/API/Element/focusin_event
3. https://developer.mozilla.org/en-US/docs/Web/API/Element/focusout_event
Here is some sample code to put into VS code.
```html
Focus, Focusin, and Focusout Events
```
We will want the focus event to apply to btn1, we can do that by doing this ,
```js
const btn1 = document.getElementById("bnt1");
btn1.addEventListener("focus", ()=>{
console.log("Btn1 focused")
})
```
This will log a message when Btn1 gains focus.
Next we will want to focus in on btn2, we can do that by doing this,
```js
const btn2 = document.getElementById("bnt2");
btn2.addEventListener("focusin", ()=> {
console.log("Focus in on Btn2")
})
```
This will log a message any time the focus moves inside Btn2.
Finally we will focus out of Btn2, we can do that by doing this,
```js
btn2.addEventListener("focusout", ()=> {
console.log("Focus out on Btn2")
})
```
This will log a message any time the focus moves out of Btn2.