blur (event)

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);

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).