Element: focus event - Web APIs

Element: focus event - Web APIs | MDN

Syntax

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

addEventListener("focus", (event) => { })

onfocus = (event) => { }

Event type

A FocusEvent. Inherits from UIEvent and Event.

Event properties

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

FocusEvent.relatedTarget: The element losing focus, if any.

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

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

html

<form id="form">
  <label>
    Some text:
    <input type="text" placeholder="text input" />
  </label>
  <label>
    Password:
    <input type="password" placeholder="password" />
  </label>
</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 # handler-onfocus

Browser compatibility

Help improve MDN

Learn how to contribute

This page was last modified on Sep 25, 2025 by MDN contributors.