Window: focus event

The focus event fires when an element has received focus.

The opposite of focus is blur.

Bubbles	No
Cancelable	No
Interface	`FocusEvent`
Event handler property	`onfocus`
Sync / Async	Sync
Composed	Yes

Examples

Live example

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

HTML

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

CSS

.paused {
  background: #ddd;
  color: #555;
}

JavaScript

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.';
}

const log = document.getElementById('log');

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

Result

Specifications

Specification
UI Events # event-type-focus

Browser compatibility

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet
`focus_event`	Yes	12	Yes Apart from firing the event on `window` as other browsers do, Firefox also fires the event on the `document` object. See bug 1228802. Yes-24 The interface for this event is `Event`, not `FocusEvent`.	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes