The blur
event fires when an element has lost focus. The main difference between this event and focusout
is that focusout
bubbles while blur
does not.
The opposite of blur
is focus
.
Bubbles | No |
---|---|
Cancelable | No |
Interface | FocusEvent |
Event handler property | onblur |
Sync / Async | Sync |
Composed | Yes |
Examples
Simple example
HTML
<form id="form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </form>
JavaScript
const password = document.querySelector('input[type="password"]'); password.addEventListener('focus', (event) => { event.target.style.background = 'pink'; }); password.addEventListener('blur', (event) => { event.target.style.background = ''; });
Result
Event delegation
There are two ways of implementing event delegation for this event: by using the focusout
event, or by setting the useCapture
parameter of addEventListener()
to true
.
HTML
<form id="form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </form>
JavaScript
const form = document.getElementById('form'); form.addEventListener('focus', (event) => { event.target.style.background = 'pink'; }, true); form.addEventListener('blur', (event) => { event.target.style.background = ''; }, true);
Result
Specifications
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
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
blur event | Chrome Full support 1 | Edge Full support 12 | Firefox
Full support
24
| IE Full support 9 | Opera Full support 11.6 | Safari Full support 3.1 | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox Android
Full support
24
| Opera Android Full support 12.1 | Safari iOS Full support 2 | Samsung Internet Android Full support 1.0 |
Legend
- Full support
- Full support
- See implementation notes.
- See implementation notes.
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.