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.
General info
- Specification
- DOM L3
- Interface
FocusEvent
- Bubbles
- No
- Cancelable
- No
- Target
- Element
- Default Action
- None.
Note: 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.Properties
Property | Type | Description |
---|---|---|
target Read only |
EventTarget |
The event target (the topmost target in the DOM tree). |
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 |
Event delegation
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
:
HTML Content
<form id="form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </form>
JavaScript Content
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);
Browser compatibility
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).
Related Events
Document Tags and Contributors
Tags:
Contributors to this page:
EliSnow,
erikadoyle,
vinyldarkscratch,
fscholz,
smasher164,
Sebastianz,
Nickolay,
samdroid,
cvrebert,
teoli,
kohei.yoshino,
Sheppy,
Jeremie,
ethertank,
louisremi
Last updated by:
EliSnow,