Element: focus event

The focus event fires when an element has received focus. The main difference between this event and focusin is that focusin bubbles while focus does not.

The opposite of focus is blur.

This event is not cancelable and does not bubble.

Syntax

Use the event name in methods like addEventListener(), or set an event handler property.

addEventListener('focus', event => { });

onfocus = event => { };

Event type

An FocusEvent. Inherits from Event.

Event properties

This interface also inherits properties from its parent UIEvent, and indirectly from Event.

FocusEvent.relatedTarget: An EventTarget representing a secondary target for this event. In some cases (such as when tabbing in or out a page), this property may be set to null for security reasons.

Examples

Simple example

HTML

<form id="form">
  <input type="text" placeholder="text input">
  <input type="password" placeholder="password">
</form>

JavaScript

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 event, or by setting the useCapture parameter of addEventListener() to true.

HTML

<form id="form">
  <input type="text" placeholder="text input">
  <input type="password" placeholder="password">
</form>

JavaScript

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

Specification
UI Events # event-type-focus
HTML Standard # handler-onfocus

Browser compatibility

BCD tables only load in the browser