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): 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
<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
We're converting our compatibility data into a machine-readable JSON format.
This compatibility table still uses the old format,
because we haven't yet converted the data it contains.
Find out how you can help!
| Característica | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Soporte básico | 5 | (Yes) | (Yes)[1] | 6 | 12.1 | 5.1 |
| Característica | Android | Chrome para Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|---|
| Soporte básico | 4.0 | 53 | (Yes) | ? | 10.0 | 12.1 | 5.1 |
[1] Antes de Gecko 24 (Firefox 24 / Thunderbird 24 / SeaMonkey 2.21) la interfaz para este evento era Event, no FocusEvent. Vea (error 855741).