The blur
event fires when an element has lost focus. The main difference between this event and focusout
is that focusout
[[../../../../Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture|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.
Update compatibility data on GitHub
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.
See also
Element: blur event by Mozilla Contributors is licensed under CC-BY-SA 2.5.