Element: focusout event
The focusout
event fires when an element is about to lose focus. The main difference between this event and blur
is that focusout
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 |
---|
UI Events # event-type-focusout |
Browser compatibility
BCD tables only load in the browser
See also
- Related events:
blur
,focus
,focusin
- Focusing: focus/blur