Element: blur event
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 |
---|
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.
See also
- Related events:
focus
,focusin
,focusout
- This event on
Window
targets:blur
event - Focusing: focus/blur