Window: blur event

The blur event fires when an element has lost focus.

The opposite of blur is focus.

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


Live example

This example changes the appearance of a document when it loses focus. It uses addEventListener() to monitor focus and blur events.


<p id="log">Click on this document to give it focus.</p>


.paused {
  background: #ddd;
  color: #555;


function pause() {
  log.textContent = 'FOCUS LOST!';

function play() {
  log.textContent = 'This document has focus. Click outside the document to lose focus.';

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

window.addEventListener('blur', pause);
window.addEventListener('focus', play);



Specification Status Comment
UI Events Working Draft Added info that this event is composed.
Document Object Model (DOM) Level 3 Events Specification Obsolete Initial definition

Browser compatibility

BCD tables only load in the browser

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

  • Related event: focus
  • This event on Element targets: blur event