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.
Update compatibility data on GitHub
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.
See also
Element: focus event by Mozilla Contributors is licensed under CC-BY-SA 2.5.