Window: focus event

The focus event fires when an element has received focus.

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.

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

onfocus = (event) => { }

Event type

A FocusEvent. Inherits from UIEvent and Event.

EventUIEventFocusEvent

Examples

undefined

Live example

This example changes the appearance of a document when it loses focus. It uses addEventListener() to monitor focus and blur events.

HTML

html
<p id="log">Click on this document to give it focus.</p>

CSS

css
.paused {
  background: #dddddd;
  color: #555555;
}

JavaScript

js
const log = document.getElementById("log");

function pause() {
  document.body.classList.add("paused");
  log.textContent = "FOCUS LOST!";
}

function play() {
  document.body.classList.remove("paused");
  log.textContent =
    "This document has focus. Click outside the document to lose focus.";
}

window.addEventListener("blur", pause);
window.addEventListener("focus", play);

Result

Specifications

See also