Element: focusout event
The focusout
event fires when an element has lost focus, after the blur
event. The two events differ in that focusout
bubbles, while blur
does not.
The opposite of focusout
is the focusin
event, which fires when the element has received focus.
The focusout
event is not cancelable.
Syntax
Use the event name in methods like addEventListener()
.
js
addEventListener("focusout", (event) => {});
Event type
A FocusEvent
. Inherits from UIEvent
and Event
.
Event properties
Examples
Live example
HTML
html
<form id="form">
<label>
Some text:
<input type="text" placeholder="text input" />
</label>
<label>
Password:
<input type="password" placeholder="password" />
</label>
</form>
JavaScript
js
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 |
Note: The UI Events specification describes an order of focus events that's different from what current browsers implement.
Browser compatibility
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
focusout event |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Partial support
- Partial support
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.
See also
- Related events:
blur
,focus
,focusin
- Focusing: focus/blur