blur (evento)
Baseline
Ampliamente disponible
Esta característica está consolidada y funciona en muchos dispositivos y versiones de navegador. Está disponible en todos los navegadores desde julio de 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
- 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 |
String |
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,
);
Especificaciones
| Especificación |
|---|
| UI Events # event-type-blur |
| HTML # handler-onblur |