Window: blur event

{{APIRef}}

The blur event fires when an element has lost focus.

The opposite of blur is {{domxref("Window/focus_event", "focus")}} .

This event is not cancelable and does not bubble.

Syntax

Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}} , or set an event handler property.

addEventListener("blur", (event) => { })

onblur = (event) => { }

Event type

A {{domxref("FocusEvent")}} . Inherits from {{domxref("UIEvent")}} and {{domxref("Event")}} .

{{InheritanceDiagram("FocusEvent")}}

Event properties

This interface also inherits properties from its parent {{domxref("UIEvent")}} , and indirectly from {{domxref("Event")}} .

{{domxref("FocusEvent.relatedTarget")}}
- : An {{domxref("EventTarget")}} representing a secondary target for this event. In some cases (such as when tabbing in or out a page), this property may be set to null for security reasons.

Examples

Live example

This example changes the appearance of a document when it loses focus. It uses {{domxref("EventTarget.addEventListener()", "addEventListener()")}} to monitor {{domxref("Window/focus_event", "focus")}} and blur events.

HTML

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

CSS

.paused {
  background: #dddddd;
  color: #555555;
}

JavaScript

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

function pause() {
  document.body.classList.add("paused");
  log.textContent = "FOCUS LOST!";
}

function play() {
  document.body.classList.remove("paused");
  log.textContent =
    "This document has focus. Click outside the document to lose focus.";
}

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

Result

{{EmbedLiveSample("Live_example")}}

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}

The value of {{DOMxRef("Document.activeElement")}} varies across browsers while this event is being handled (Firefox 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.

docs.rodeo

MDN Web Docs mirror