# Element: focus event



The **`focus`** event fires when an element has received focus. The event does not bubble, but the related [focusin](https://developer.mozilla.org/en-US/docs/Web/API/Element%2Ffocusin_event) event that follows does bubble.

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

The `focus` 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("focus", (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
onfocus = (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

### Simple 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 password = document.querySelector('input[type="password"]');

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

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

#### Result

### Event delegation

There are two ways of implementing event delegation for this event: by using the [focusin](https://developer.mozilla.org/en-US/docs/Web/API/Element%2Ffocusin_event) event, or by setting the `useCapture` parameter of [addEventListener()](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) to `true`.

#### 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(
  "focus",
  (event) => {
    event.target.style.background = "pink";
  },
  true,
);

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

#### Result

## Specifications

## Browser compatibility

## See also

- The [HTMLElement.focus()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus) method
- Related events: [blur](https://developer.mozilla.org/en-US/docs/Web/API/Element%2Fblur_event), [focusin](https://developer.mozilla.org/en-US/docs/Web/API/Element%2Ffocusin_event), [focusout](https://developer.mozilla.org/en-US/docs/Web/API/Element%2Ffocusout_event)
- This event on `Window` targets: [focus](https://developer.mozilla.org/en-US/docs/Web/API/Window%2Ffocus_event) event
- [Focusing: focus/blur](https://javascript.info/focus-blur)