dom / latest / window / focus_event.html /

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
5
12
6
["Apart from firing the event on window as other browsers do, Firefox also fires the event on the document object. See bug 1228802.", "Before Firefox 24, the interface for this event is a plain Event, not FocusEvent."]
11
≤12.1
5.1
≤37
18
6
["Apart from firing the event on window as other browsers do, Firefox also fires the event on the document object. See bug 1228802.", "Before Firefox 24, the interface for this event is a plain Event, not FocusEvent."]
≤12.1
5
1.0

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