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.

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

<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

Eventos relacionados