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.
addEventListener('focus', (event) => { });
onfocus = (event) => { };
Event type
A FocusEvent
. Inherits from Event
.
Event properties
This interface also inherits properties from its parent UIEvent
, and indirectly from Event
.
-
An
EventTarget
representing a secondary target for this event. In some cases (such as when tabbing in or out a page), this property may be set tonull
for security reasons.
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 |
HTML Standard # handler-onfocus |
Browser compatibility
BCD tables only load in the browser