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 Does the event normally bubble?
cancelable Read only boolean Is it possible to cancel the event?
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 (all browsers but Firefox), 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 Firefox (Gecko) Internet Explorer Opera Safari
Basic support ? (Yes)[1] ? ? ?
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ?

?

? ? ? ?

[1] Prior to Gecko 24 (Firefox 24 / Thunderbird 24 / SeaMonkey 2.21) the interface for this event was Event, not FocusEvent. See (bug 855741).

Document Tags and Contributors

Last updated by: Sebastianz,