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 |
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
<p id="log">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 |
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.