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
- 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
js
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