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.

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

Browser compatibility

See also

• Related events: blur, focus, focusin