Window: blur event
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
The blur event fires when the window has lost focus,, for example when the user moves focus from the page to the address bar. Focus may previously have been on the document's viewport or on an element within it.
The opposite of blur is focus.
This event is not cancelable and does not bubble.
Syntax
Use the event name in methods like addEventListener(), or set an event handler property.
js
addEventListener("blur", (event) => { })
onblur = (event) => { }
Event type
A FocusEvent. Inherits from UIEvent and Event.
Examples
Live example
This example changes the appearance of a document when it loses focus. It uses addEventListener() to monitor focus and blur events.
HTML
html
<p id="log">Click on this document to give it focus.</p>
CSS
css
.paused {
background: #dddddd;
color: #555555;
}
JavaScript
js
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
Specifications
| Specification |
|---|
| UI Events # event-type-blur |
| HTML # handler-onblur |