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

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet
`focusout_event`	1	12	52	9	11.6	5	≤37	18	52	12.1	4.2	1.0