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`	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="disabled">
  <input type="password" placeholder="disabled">
</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	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	5	(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).