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 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
BCD tables only load in the browser
See also
- Related events:
blur
,focus
,focusin
- Focusing: focus/blur