# Element: focusin event



The **`focusin`** event fires when an element has received focus, after the [focus](https://developer.mozilla.org/en-US/docs/Web/API/Element%2Ffocus_event) event. The two events differ in that `focusin` bubbles, while `focus` does not.

The opposite of `focusin` is the [focusout](https://developer.mozilla.org/en-US/docs/Web/API/Element%2Ffocusout_event) event, which fires when the element has lost focus.

The `focusin` event is not cancelable.

## Syntax

Use the event name in [addEventListener()](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget%2FaddEventListener):

```js-nolint
addEventListener("focusin", (event) => { })
```

Alternatively, assign to the [event handler property](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Events#using_onevent_properties) of the interface:

```js-nolint
onfocusin = (event) => { }
```

## Event type

A [FocusEvent](https://developer.mozilla.org/en-US/docs/Web/API/FocusEvent). Inherits from [UIEvent](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent) and [Event](https://developer.mozilla.org/en-US/docs/Web/API/Event).

## Examples

### Live example

#### HTML

```html
<form id="form">
  <label>
    Some text:
    <input type="text" placeholder="text input" />
  </label>
  <label>
    Password:
    <input type="password" placeholder="password" />
  </label>
</form>
```

#### JavaScript

```js
const form = document.getElementById("form");

form.addEventListener("focusin", (event) => {
  event.target.style.background = "pink";
});

form.addEventListener("focusout", (event) => {
  event.target.style.background = "";
});
```

#### Result

## Specifications

> **NOTE:**
> The _UI Events_ specification describes an [order of focus events](https://developer.mozilla.org/en-US/docs/Web/API/FocusEvent#order_of_events) that's different from what current browsers implement.

## Browser compatibility

## See also

- Related events: [blur](https://developer.mozilla.org/en-US/docs/Web/API/Element%2Fblur_event), [focus](https://developer.mozilla.org/en-US/docs/Web/API/Element%2Ffocus_event), [focusout](https://developer.mozilla.org/en-US/docs/Web/API/Element%2Ffocusout_event)
- [Focusing: focus/blur](https://javascript.info/focus-blur)