The blur event is fired when an element has lost focus. The main difference between this event and focusout is that only the latter bubbles.
FocusEventDocument.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.| Property | Type | Description |
|---|---|---|
target Read only
| EventTarget | Event target (DOM element) |
type Read only
| DOMString | The type of event. |
bubbles Read only
| Boolean | Whether the event normally bubbles or not. |
cancelable Read only
| Boolean | Whether the event is cancellable or not. |
relatedTarget Read only
|
EventTarget (DOM element) | null |
There are two ways of implementing event delegation for this event : by using the focusout event in browsers that support it, or by setting the "useCapture" parameter of addEventListener to true:
<form id="form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </form>
var form = document.getElementById("form");
form.addEventListener("focus", function( event ) {
event.target.style.background = "pink";
}, true);
form.addEventListener("blur", function( event ) {
event.target.style.background = "";
}, true); | Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | 5 | (Yes) | (Yes)[1] | 6 | 12.1 | 5.1 |
| Feature | Android | Chrome for Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|---|
| Basic support | 4.0 | 53 | (Yes) | ? | 10.0 | 12.1 | 5.1 |
[1] Prior to Gecko 24 (Firefox 24 / Thunderbird 24 / SeaMonkey 2.21) the interface for this event was Event, not FocusEvent. See (bug 855741).
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/Events/blur