blur (evento)

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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
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 (Error 452307 en Firefox): IE10 lo agrega al elemento al cual el foco se movera, mientras Firefox y Chrome muy seguido lo agregan al cuerpo del documento.

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

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, o cambiando el parámetro "useCapture" de addEventListener a true:

Contenido HTML

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

Especificaciones

Specification
UI Events # event-type-blur
HTML Standard # handler-onblur

Compatibilidad con navegadores

BCD tables only load in the browser