W3cubDocs

/Web APIs

Element: focus event

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨July 2015⁩.

The focus event fires when an element has received focus. The event does not bubble, but the related focusin event that follows does bubble.

The opposite of focus is the blur event, which fires when the element has lost focus.

The focus event is not cancelable.

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 UIEvent FocusEvent

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

<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

<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

Desktop Mobile
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android WebView on iOS
focus_event 1 12 24
6–24The interface for this event is Event, not FocusEvent.
 11.6 3.1 18 24
6–24The interface for this event is Event, not FocusEvent.
 12.1 2 1.0 4.4 2

See also

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event