The focus
event fires when an element has received focus. The main difference between this event and focusin
is that focusin
bubbles while focus
does not.
The opposite of focus
is blur
.
Bubbles | No |
---|---|
Cancelable | No |
Interface | FocusEvent |
Event handler property | onfocus |
Sync / Async | Sync |
Composed | Yes |
Examples
Simple example
HTML
<form id="form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </form>
JavaScript
const password = document.querySelector('input[type="password"]'); password.addEventListener('focus', (event) => { event.target.style.background = 'pink'; }); password.addEventListener('blur', (event) => { event.target.style.background = ''; });
Result
Event delegation
There are two ways of implementing event delegation for this event: by using the focusin
event, or by setting the useCapture
parameter of addEventListener()
to true
.
HTML
<form id="form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </form>
JavaScript
const form = document.getElementById('form'); form.addEventListener('focus', (event) => { event.target.style.background = 'pink'; }, true); form.addEventListener('blur', (event) => { event.target.style.background = ''; }, true);
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 1 | Edge Full support 12 | Firefox
Full support
24
| IE Full support 9 | Opera Full support 11.6 | Safari Full support 3.1 | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox Android
Full support
24
| Opera Android Full support 12.1 | Safari iOS Full support 2 | Samsung Internet Android Full support 1.0 |
Legend
- Full support
- Full support
- See implementation notes.
- See implementation notes.