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 |
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 |
This example changes the appearance of a document when it loses focus. It uses addEventListener()
to monitor focus
and blur
events.
<p id="log">Click on this document to give it focus.</p>
.paused { background: #ddd; color: #555; }
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);
Specification |
---|
UI Events # event-type-focus |
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
|
© 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