The focusout
event fires when an element is about to lose focus. The main difference between this event and blur
is that focusout
[[../../../../Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture|bubbles]] while blur
does not.
The opposite of focusout
is focusin
.
Bubbles | Yes |
Cancelable | No |
Interface | FocusEvent
|
Event handler property | onfocusout
|
Sync / Async | Sync |
Composed | Yes |
Examples
Live example
HTML
<form id="form">
<input type="text" placeholder="text input">
<input type="password" placeholder="password">
</form>
JavaScript
const form = document.getElementById('form');
form.addEventListener('focusin', (event) => {
event.target.style.background = 'pink';
});
form.addEventListener('focusout', (event) => {
event.target.style.background = '';
});
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 | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
focusout event
|
Chrome
Full support 1 |
Edge
Full support 12 |
Firefox
Full support 52 |
IE
Full support 9 |
Opera
Full support 11.6 |
Safari
Full support 5 |
WebView Android
Full support 1 |
Chrome Android
Full support 18 |
Firefox Android
Full support 52 |
Opera Android
Full support 12.1 |
Safari iOS
Full support 4.2 |
Samsung Internet Android
Full support 1.0 |
Legend
- Full support
- Full support
See also
Element: focusout event by Mozilla Contributors is licensed under CC-BY-SA 2.5.