blur (evento)

El evento blur es disparado cuando un elemento ha perdido su foco. La diferencia principal entre este evento y focusout es solo las últimas burbujas.

Información General

Especificación: DOM L3
Interfaz: FocusEvent
Burbujas: No
Cancelable: No
Objetivo: Element
Acción por defecto: Ninguna.

Nota: El valor de Document.activeElement varía a traves de navegadores mientras este evento está siendo manejado (bug 452307): IE10 lo agrega al elemento al cual el foco se movera, mientras Firefox y Chrome muy seguido lo agregan al cuerpo del documento.

Propiedades

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

Delegación de eventos

Hay dos maneras de implementar la delegación de eventos para este evento: Usando el evento focusout en exploradores que lo soporten (todos los navegadores excepto Firefox), o cambiando el parámetro "useCapture" de addEventListener a verdadero:

Contenido HTML

<form id="form">
  <input type="text" placeholder="disabled">
  <input type="password" placeholder="disabled">
</form>

Contenido JavaScript

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

Caracteristica	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Soporte básico	5	(Yes)^[1]	?	?	?

Caracteristica	Android	Chrome para Android	Firefox Móvil (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Soporte básico	?	?	?	?	?	?

[1] Antes de Gecko 24 (Firefox 24 / Thunderbird 24 / SeaMonkey 2.21) la interfz para este evento era Event, no FocusEvent. Vea (bug 855741).