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
[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,