Element: blur event

The blur event fires when an element has lost focus. The main difference between this event and focusout is that focusout bubbles while blur does not.

The opposite of blur is focus.

Bubbles No
Cancelable No
Interface FocusEvent
Event handler property onblur
Sync / Async Sync
Composed Yes

Examples

Simple example

HTML

<form id="form">
  <input type="text" placeholder="text input">
  <input type="password" placeholder="password">
</form>

JavaScript

const password = document.querySelector('input[type="password"]');

password.addEventListener('focus', (event) => {
  event.target.style.background = 'pink';
});

password.addEventListener('blur', (event) => {
  event.target.style.background = '';
});

Result

Event delegation

There are two ways of implementing event delegation for this event: by using the focusout event, or by setting the useCapture parameter of addEventListener() to true.

HTML

<form id="form">
  <input type="text" placeholder="text input">
  <input type="password" placeholder="password">
</form>

JavaScript

const form = document.getElementById('form');

form.addEventListener('focus', (event) => {
  event.target.style.background = 'pink';
}, true);

form.addEventListener('blur', (event) => {
  event.target.style.background = '';
}, true);

Result

Specifications

Specification
UI Events
# event-type-blur

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
blur_event
1
12
24
6-24
The interface for this event is Event, not FocusEvent.
9
11.6
3.1
1
18
24
6-24
The interface for this event is Event, not FocusEvent.
12.1
2
1.0

The value of Document.activeElement varies across browsers while this event is being handled (bug 452307): IE10 sets it to the element that the focus will move to, while Firefox and Chrome often set it to the body of the document.

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/blur_event