blur (evento)

El evento blur es disparado cuando un elemento ha perdido su foco. La diferencia principal entre este evento y focusout es que sólo el último se propaga (bubbles).

Información General

Especificación: DOM L3
Interfaz: FocusEvent (en-US)
Burbujas: No
Cancelable: No
Objetivo: Element
Acción por defecto: Ninguna.

Document.activeElement (en-US)error 452307

null

Propiedades

Propiedad	Tipo	Descripción
`target` Read only	`EventTarget`	Objetivo del evento (elemento DOM)
`type` Read only	`DOMString`	El tipo de evento.
`bubbles` Read only	`Boolean`	Si el elemento normalmente se propaga o no.
`cancelable` Read only	`Boolean`	Si el evento es cancelable o no.
`relatedTarget` Read only	`EventTarget` (DOM element)	null

Hay dos maneras de implementar la delegación de eventos para este evento: usando el evento focusout en exploradores que lo soporten, o cambiando el parámetro "useCapture" de addEventListener a true:

Contenido HTML

<form id="form">
  <input type="text" placeholder="text input">
  <input type="password" placeholder="password">
</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);

Compatibilidad en navegadores

BCD tables only load in the browser