Window: blur event
BaselineWidely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Theblur event fires when an element has lost focus.
The opposite ofblur isfocus.
This event is not cancelable and does not bubble.
Syntax
Use the event name in methods likeaddEventListener(), or set an event handler property.
addEventListener("blur", (event) => { })onblur = (event) => { }Event type
AFocusEvent. Inherits fromUIEvent andEvent.
Event properties
This interface also inherits properties from its parentUIEvent, and indirectly fromEvent.
FocusEvent.relatedTargetAn
EventTargetrepresenting a secondary target for this event. In some cases (such as when tabbing in or out a page), this property may be set tonullfor security reasons.
Examples
Live example
This example changes the appearance of a document when it loses focus. It usesaddEventListener() to monitorfocus andblur events.
HTML
<p>Click on this document to give it focus.</p>CSS
.paused { background: #ddd; color: #555;}JavaScript
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.";}const log = document.getElementById("log");window.addEventListener("blur", pause);window.addEventListener("focus", play);Result
Specifications
| Specification |
|---|
| UI Events # event-type-blur |
| HTML # handler-onblur |
Browser compatibility
The value ofDocument.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 thebody of the document.