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 | Status | Comment |
---|---|---|
UI Events | Working Draft | Added info that this event is composed. |
Document Object Model (DOM) Level 3 Events Specification | Obsolete | Initial definition |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
focus event | Chrome Full support Yes | Edge Full support 12 | Firefox
Full support
Yes
| IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
Legend
- Full support
- Full support
- See implementation notes.
- See implementation notes.