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

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

See also

  • Related event: blur
  • This event on Element targets: focus event

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