dom / latest / element / focusout_event.html /

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

See also

© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Element/focusout_event

Name Web APIs
Version
Badge
Last Updated 2022-04-27T09:33:08Z